Firefox 扩展创建 - insertCSS onclick 工作但如何加载？

Question

我尝试做我的第一个 Firefox 扩展。真的很简单。创建工具栏按钮。单击插入或删除后 CSS（我使用本地存储...插入后我保存为真，删除后CSS 我保存为假）我创建按钮，点击后一切正常。

但问题是...我想从存储中检查 true/false（加载新页面后），如果是，则自动插入 CSS。如果 false 什么都不做。

我该怎么做？工具栏按钮点击有效，但我想执行脚本 onload 来检查实际状态，如果是真的，插入CSS。

manifest.json


 
{
  "manifest_version": 2,
  "name": "scripts test",
  "description": "INSERT CSS to page",
  "version": "1.1,",
  "background": {
    "scripts": [ "background.js" ]
  },

  "content_scripts": [
    {
      "matches": [ "*://*.greatWorld.org/*" ],
      "js": [ "func.js" ]
    }
  ],

  "browser_action": {
    "default_icon": {
      "16": "on.svg",
      "32": "on.svg"
    }
  },

  "permissions": [ "notifications", "storage", "tabs", "activeTab" ]
}

background.js


 

if (!localStorage.getItem('actstate2')) {
    populateStorage();
};




function openPage() {

        if (localStorage.getItem('actstate2') == "true") {
            browser.browserAction.setIcon({ path: "on.svg" });
            browser.tabs.insertCSS({ file: "content-style.css" });
            localStorage.setItem('actstate2', false);

        } else {
            browser.browserAction.setIcon({ path: "off.svg" });
            browser.tabs.removeCSS({ file: "content-style.css" });
            localStorage.setItem('actstate2', true);

        }
    };


function populateStorage() {
    localStorage.setItem('actstate2', false);
}


browser.browserAction.onClicked.addListener(openPage);

Answer 1

使用browser.contentScripts到register/unregister自动注入CSS:

let scriptHandle;

function toggle() {
  const newState = !(localStorage.actstate2 === 'true');
  localStorage.actstate2 = newState;
  browser.browserAction.setIcon({path: newState ? 'on.svg' : 'off.svg'});
  browser.tabs[newState ? 'insertCSS' : 'removeCSS']({file: 'content-style.css'});
  toggleAutoInjection(newState);
}

async function toggleAutoInjection(enable) {
  if (enable) {
    scriptHandle = await browser.contentScripts.register({
      css: ['content-style.css'],
      runAt: 'document_start',
      matches: browser.runtime.getManifest().content_scripts[0].matches,
    });
  } else if (scriptHandle) {
    scriptHandle.unregister();
    scriptHandle = null;
  }
}

browser.browserAction.onClicked.addListener(toggle);

Firefox 扩展创建 - insertCSS onclick 工作但如何加载？

Firefox Extension createing - insertCSS onclick work but how to onload?

javascript

firefox-addon-webextensions