stu*_*aur 5 javascript css google-chrome-extension
我正在尝试创建一个 Chrome 扩展程序，当单击扩展程序按钮时，该扩展程序会将 CSS 注入页面。
弹出窗口加载正常，但无法注入 CSS。
清单.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:///*"]
}
弹出窗口.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>
样式文件
*
{
float: none !important;
position: static !important;
}
table, tbody, td, tfoot, th, thead, tr
{
display: block !important;
}
测试者.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权限，并注意<all_urls>权限包括file:///URL。
| 归档时间： |
|
| 查看次数： |
1318 次 |
| 最近记录： |