javascript - 从 Chrome 存储中插入 CSS

Question

我刚开始为 Chrome 创建一个扩展程序。我设法创建了一个选项页面，您可以在其中输入 css 代码，当单击保存按钮时，它通过 chrome.storage.sync.set 存储在变量“custom-css”中

我可以使用 chrome.storage.sync.get 进行检索，但不明白如何将此自定义代码注入所有页面，例如将所有链接更改为不同的颜色。

清单.json

   {
  "name": "Test Extension",
  "description": "Simple Extension",
  "version": "1.0",
  "manifest_version": 3,
     "content_scripts": [ {
      "all_frames": false,
      "js": [ "/js/content.js"],
      "matches": [ "\u003Call_urls>" ],
      "run_at": "document_idle"
   } ],
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "activeTab", "scripting", "tabs"],
  "host_permissions": [ "http://*/", "https://*/" ],
  "icons": {
      "16": "/images/icon_16.png",
      "32": "/images/icon_32.png",
      "48": "/images/icon_48.png",
      "128": "/images/icon_128.png"
  },
  "options_page": "/html/options.html"
}

背景.js

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete') {
    chrome.scripting.executeScript({
      target: { tabId: tabId },
      files: ["/js/inject.js"]
    })
      .then(() => {
        console.log("INJECTED CSS.");
        })
      .catch(err => console.log(err));
  }
});

注入.js

//Get Custom CSS Variable and inject
chrome.storage.sync.get({'CustomCSS' : ""}, function (result) {
    CustomCSS = result.CustomCSS;
    chrome.tabs.insertCSS(null, { code: CustomCSS });
});

我在控制台中得到的错误是：错误处理响应：TypeError：无法读取未定义的属性“insertCSS”

标签： javascriptgoogle-chrome-extension