javascript - 将 CSS 文件注入仅限于网站主页（不超过域）

Question

我正在创建一个简单的 Chrome 扩展程序，它使用内容脚本仅在Google 主页上阻止黑条。但是我不希望它在用户搜索后阻止黑条。

也就是说，我希望它适用于这个地址：

http://www.google.com

但不是这个地址：

http://www.google.com/search-terms-here/

在 manifest.json 中，我一直在使用它来阻止栏：

  "content_scripts": [
   {
    "matches": ["http://google.com"],
    "css": ["blocker.css"]
   }

但是使用"matches": ["http://google.com"]不起作用。有谁知道我应该使用哪个地址"matches"来获得所需的结果？

Answer 1

您不能仅使用清单来执行此操作，您必须以编程方式注入 CSS。

参考：Chrome，“匹配模式和球体”

几个问题，从大到小：

• Chrome 仍然存在一个错误，即 CSS 注入会忽略exclude_globs和exclude_matches.
• 谷歌大量使用标签和查询参数，并且matches不exclude_matches处理这些。
• Google 大量使用 AJAX，因此“新”页面不会重新加载。这意味着您必须能够关闭您添加的任何 CSS。
• 谷歌使用www.. 你的比赛必须是这样的：。"http://www.google.com/"
• "http://google.com"对 无效match。它会给出错误：

  无法从“{never you mind!}”加载扩展程序。'content_scripts[0].matches[0]' 的值无效：空路径。

---

解决方案：

1. 为您的 CSS 使用类，不要直接更改元素 CSS。这是为了方便切换。
2. 以编程方式注入 CSS。
3. 监听hashchange事件以了解何时从目标元素中删除新类。

这是一个示例扩展：

清单.json：

{
    "manifest_version": 2,
    "content_scripts":  [ {
        "js":               [ "CSS_handler.js" ],
        "matches":          [ "http://www.google.com/", "https://www.google.com/" ],
        "exclude_globs":    [ "http://www.google.com/#*", "https://www.google.com/#*" ]
    } ],
    "name":         "AJAX aware, CSS injection switching",
    "description":  "From SO 17395877.  Inject at home page, not 'results' pages. css property fires incorrectly due to bug. Target pages (Google) load 'new' pages via AJAX.",
    "version":      "1",
    "web_accessible_resources": ["blocker.css"]
}

拦截器.css：

.mycsHide {
    display: none !important;
}

CSS_handler.js：

var link    = document.createElement ("link");
link.href   = chrome.extension.getURL ("blocker.css");
link.type   = "text/css";
link.rel    = "stylesheet";
document.head.appendChild (link);

//-- Global vars
var cssSelectorsToHide  = [
    "#gbz",
    "#gbx3"
];
var hideElems           = true;


//-- Initial run on cold start or full reload.
fireOnNewPage ();

//-- Run on "new" ajax pages.
window.addEventListener ("hashchange", fireOnNewPage,  false);

function fireOnNewPage () {
    /*-- Only hide if there is no hash or URL params.
        The manifest makes sure there is no path.
    */
    hideElems = ! (location.hash  ||  location.search);

    cssSelectorsToHide.forEach (setElemVisibility);
}

function setElemVisibility (selector) {
    var nodes   = document.querySelectorAll (selector);

    //-- Add or remove our special CSS class...
    for (var J = nodes.length - 1;  J >= 0;  --J) {
        if (hideElems) {
            nodes[J].classList.add ("mycsHide");
        }
        else {
            nodes[J].classList.remove ("mycsHide");
        }
    }
}