3

我一直在尝试构建一个 Chrome 扩展程序，但不幸的是，当它最终让它工作时，我意识到我必须让它只在某些 URL 上处于活动状态，这很好，因为 Chrome 两者exclude_matches兼而有之exclude_globs。然而，当将这两个选项与 CSS 结合使用时，Chrome 中存在一个错误——它不起作用。

我想知道是否有人知道我可以仅在某些域上注入我的 CSS 的任何其他方式（我想从几个域中排除而不是允许很多域）？我知道我可以使用 Javascript 将其写入现有 CSS 的末尾，但不幸的是，这让我在 CSS 显示的内容上出现了第二次延迟（这也很明显）。

如果有人能提出一些替代方案，我将不胜感激。也许有一些方法可以通过 Javascript 使用 CSS 文件，这不会影响性能（请注意，在 Javascript 中不需要域排除，因为它exclude_matches适用于 JS 文件）。任何和所有的想法都是有帮助的，可惜谷歌没有修复一个已经存在一年多的错误！

编辑：因为我认为我会得到一两个关于程序注入的回复，所以我不清楚这是如何工作的，因此作为一个例子，我们将使用这些链接（后者是我不想实现的链接） CSS on）以防有人想发布示例。

http://example.com/
http://example.com/random/
http://example.com/random/example/

哦，我知道谷歌的例子是使用一个按钮来启动 CSS，但我宁愿让它在页面加载时启动。再次感谢！

4

1 回答 1

1

在解决此错误之前，要么列出清单中所有匹配的 URL，要么使用insertCSS API 作为解决方法。

代码示例 #1

每当单击浏览器操作图标时，此示例都会将 css 注入当前选项卡，确保default_popup清单中没有 a ，否则不会触发onClicked 事件。

//This even fires when ever a browser action is clicked
chrome.browserAction.onClicked.addListener(function (tab) {
    // This injects content.css into the current tab
    chrome.tabs.insertCSS(null, {
        file: {
            file: "content.css"
        },
        "all_frames": true //for all frames
    });
});

代码示例 #2

利用任何选项卡 API过滤一组匹配的页面以注入 CSS

选择任何 API 并注入 CSS

//Use an API to filter pages for a matching List
chrome.tabs.(SOME API HERE).addListener(function (RELATED DEFINITION) {
    //Inject CSS for a tab
    chrome.tabs.insertCSS(tabId, {
        file: {
            file: "content.css"
        }, //Any file to inject
        "all_frames": true //Inject to all Frames
    });
});

有关更多信息，请参阅此。

参考

于 2012-12-29T04:35:29.563 回答