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

Question

我正在创建一个简单的 Chrome 扩展程序，它使用 content script仅在 Google homepage 上阻止黑条。但我不希望它在用户搜索后阻止黑条。

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

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, "Match patterns and globs"

几个问题，从大到小：

• Chrome still has a bug whereby CSS injection ignores exclude_globs and exclude_matches。
• Google 大量使用主题标签和查询参数，而 matches 和 exclude_matches 不适用于这些。
• Google 大量使用 AJAX，因此“新”页面不会重新加载。这意味着您必须能够关闭添加的任何 CSS。
• 谷歌使用www.。您的匹配项必须是："@987654323@"。
• "@987654324@" 对 match 无效。它会给出错误：

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

---

解决方案：

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

这是一个示例扩展：

ma​​nifest.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"]
}

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