Question

我正在尝试创建一个Chrome扩展程序，在单击“扩展”按钮时会将CSS注入页面。

弹出窗口加载正常，但无法注入CSS。

的manifest.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>

的style.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"});
});

如果有人知道什么是错的，那将是非常有帮助的。

Answer 1

使用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:///个网址。

无法通过Chrome扩展程序注入CSS

1 个答案: