从后台执行内容脚本和关联的 CSS (Manifest V3) - Chrome 扩展

Question

我正在编写一个 chrome 扩展程序，我基本上希望当它处于活动状态时，屏幕上显示一个小圆圈。我需要 CSS，所以我想做的是在我的清单中添加背景，并且基本上只在单击图标时执行内容脚本。目前我知道如果选项卡 URL 更改，该设置就会打开，但我正在测试一些东西。我需要将 CSS 添加到我的内容脚本中，但不知道如何添加。我查了一下，发现 insertCSS() 是一个东西，但这只是一行代码，我有更多的东西。有什么想法吗？我已经审阅了它的主要 google 文档以及 MDN。任何帮助，将不胜感激。

//BACKGROUND

try {
    chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
        if(changeInfo.status == 'complete') {
            chrome.scripting.executeScript({
                files: ['content-script.js'],
                target: {tabId: tab.id}
            });
        }
    });
} catch (e) {
    console.log(e);
}

//CONTENT-SCRIPT (in another file, wasn't sure how to add it to the question


if (typeof init === 'undefined') {
    const init = function() {
        const injectElement = document.createElement("button");
        injectElement.className = 'button_attempt';
        injectElement.innerHTML = "T";
        document.body.appendChild(injectElement);

    }

    init();
        
}

//CSS


@import url('https://fonts.googleapis.com/css2?family=Prociono&family=Sorts+Mill+Goudy&display=swap');

@font-face {
    font-family: 'Goudy Bookletter 1911';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/goudybookletter1911/v13/sykt-z54laciWfKv-kX8krex0jDiD2HbY6IJshzW.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,  U+2215, U+FEFF, U+FFFD;
}


.button_attempt {
      background-image: url(icon.png);
      width: 2.5rem;
      height: 2.5rem;
      font-family: 'Goudy Bookletter 1911';
      font-size: 1.25rem;
      color: white;
      background-color: #A485C7;
      cursor: pointer;
      border: 2px solid #D0B3F1;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      /*display: none;*/

      transition: color 0.2s, background-color 0.2s ease-in-out;
}

.button_attempt:hover {
      color: #A485C7;
      background-color: white;
}

//MANIFEST
{

"name" : "Practice",
"version" : "1.0.0",
"manifest_version" : 3,
"background" : {
    "service_worker": "background.js"
},

"permissions" : ["scripting"],

"host_permissions": ["<all_urls>"]

}

Answer 1

这很简单:)

1. 将清单文件更改为类似这样的内容。

清单.json：

{

"name" : "Practice",
"version" : "1.0.0",
"manifest_version" : 3,
"background" : {
    "service_worker": "background.js"
},

"permissions" : ["scripting"],

"host_permissions": ["<all_urls>"]
"content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "css": ["content_style.css"],
      "js": ["content_script.js"],
      "run_at": "document_end"
    }
  ],

}

2. 调用content_script.js来自background.js. 您可以使用任何类型的侦听器。

背景.js：

chrome.tabs.onUpdated.addListener(function () {
  chrome.tabs.executeScript(null, { file: "content_script.js" });
});

3. 使用content_script.js来更改 DOM。您可以将样式类添加到应用的 DOM 节点，content_style.css或者添加您想要的新元素。将所有新的 CSS 规则写入content_style.css.