我正在编写一个 chrome 扩展程序,我基本上希望当它处于事件状态时,屏幕上显示一个小圆圈。我需要 CSS,所以我想做的是在 list 中添加背景,并且基本上只需在单击图标时执行内容脚本。目前我知道如果选项卡 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>"]
}
最佳答案
很简单:)
- 将 list 文件更改为类似这样的内容。
manifest.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"
}
],
}
- 从
background.js
调用content_script.js
。您可以使用任何类型的监听器。
background.js:
chrome.tabs.onUpdated.addListener(function () {
chrome.tabs.executeScript(null, { file: "content_script.js" });
});
- 使用
content_script.js
对 DOM 进行更改。您可以将样式类添加到从content_style.css
应用的 DOM 节点,或者添加您想要的新元素。在content_style.css
中写入所有新的 CSS 规则。
关于javascript - 从后台执行内容脚本和关联的 CSS (Manifest V3) - Chrome 扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72639498/