我正在尝试创建一个 Chrome 扩展程序，它会在单击“扩展程序”按钮时将 CSS 注入(inject)页面。
弹出窗口加载正常，但无法注入(inject) CSS。
list .json:
{
"name": "Flat Firemem",
"version": "1.0",
"manifest_version": 2,
"description": "Arranges the page properly in the dump.",
"browser_action": {
"default_icon": "logo.png",
"default_popup": "popup.html"
},
"permissions": ["tabs", "<all_urls>", "file:///*"]
}
popup.html
<!DOCTYPE html>
<html style=''>
<head>
<script src='tester.js'></script>
</head>
<body style="width:400px; border: 2px solid black;background-color:LightGray;">
<div id='message'>Hello..!!</div>
</body>
</html>
样式.css
*
{
float: none !important;
position: static !important;
}
table, tbody, td, tfoot, th, thead, tr
{
display: block !important;
}
tester.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null,
{file:"style.css"});
});
如果有人能找出问题所在，那将会很有帮助。
最佳答案
使用 chrome.tabs.insertCSS 相反，就这么简单。请注意，选项卡 ID 是可选的:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.insertCSS({file:"style.css"});
});
哦。此外，您需要对 chrome.browserAction.onClicked 使用弹出窗口或监听器。 .
您不能同时使用两者，因为在定义弹出窗口时不会触发事件。
两种可能的解决方案:
您的代码应该进入后台:
{ "name": "Flat Firemem", "version": "1.0", "manifest_version": 2, "description": "Arranges the page properly in the dump.", "browser_action": { "default_icon": "logo.png", }, "background": { "scripts": ["tester.js"] }, "permissions": ["tabs", "<all_urls>", "file:///*"] }或者，您只需在出现弹出窗口时调用代码:
// tester.js: no need to listen to event chrome.tabs.insertCSS({file:"style.css"});
注意:您的权限对于这项任务来说有点过高。查看 activeTab permission ，还要注意 <all_urls>权限包括 file:///网址。
关于javascript - 无法通过 Chrome 扩展程序注入(inject) CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23239145/