Question

我正在进行扩展以自定义Google的主页背景。所以我在清单中写了一些匹配规则：

"content_scripts": [
    {
      "matches": ["https://www.google.com/", "http://www.google.com/"],
      "js": ["static/js/jquery.js", "static/js/contentscript.js"]
    }
],

以及contentscript.js中的一些脚本：

var imgURL = chrome.extension.getURL("static/images/bg.jpg");
$('body').css('background-image', 'url(' + imgURL + ')');

该脚本适用于https://www.google.com，但当我尝试搜索某些内容时，该页面会跳转到https://www.google.com/#newwindow=1&sclient=psy-ab&q=Google&oq=Google&gs_l=hp.3..35i39l2j0i20l2j0l6.4788.5717.2.5939.5.3.2.0.0.0.142.397.0j3.3.0....0.0..1c.1.20.hp.xCFVga8gVZU&bav=on.2,or.r_cp.r_qf.&bvm=bv.49784469%2Cd.dGI%2Cpv.xjs.s.en_US.MpiVkF51mpA.O&fp=806ba48f5b2ed550&biw=1920&bih=963

但跳跃之后剧本仍然正在工作！如果我将长网址直接粘贴到新标签中，就不会工作！

我认为它应该与iframe或Ajax或其他相关。有人可以提供更多细节吗？如何在网址更改后阻止脚本运行？

Answer 1

如果您想将样式应用于Google的主页，只需使用非常特定于Google主页的选择器即可。通过Inspector，我很快发现主页上的<body>标记有一个类“hp”。此类不会显示在搜索结果中。

删除您的JavaScript代码，然后使用

`manifest.json`

的一部分

"content_scripts": [
    {
      "matches": ["*://www.google.com/*"],
      "css": ["my-google-style.css"]
    }
],
"web_accessible_resources": [
    "static/images/bg.jpg"
],

第一个通配符*表示“http”和“https”。
最后添加的通配符无关紧要，因为“主页”要求在下一个样式表中强制执行。
如果要在外部（=非扩展名）页面中显示图像，则需要"web_accessible_resources"键。

`my-google-style.css`

body.hp {
    background-image: url("chrome-extension://__MSG_@@extension_id__/static/images/bg.jpg");
}

我的答案的第一部分是针对您案件的建议。通常，如果您想捕获每个（脚本和用户启动的）URL更改，包括但不限于：

history.pushState / history.replaceState
location.hash = '...';
用户返回/转发（并更改哈希/历史状态）

...然后您需要在后台/活动页面中使用chrome.webNavigation API，特别是onHistoryStateUpdated和/或onReferenceFragmentUpdated事件。为了回应这些事件，您可以send a message或执行content script。

如果您只希望重写参考片段（也就是位置哈希），那么就不需要webNavigation API。实现将更简单，因为您只需要在内容脚本中监听全局hashchange事件。

Answer 2

您需要在*中添加通配符matches，如下所示：

"content_scripts": [
    {
      "matches": ["https://www.google.com/*", "http://www.google.com/*"],
      "js": ["static/js/jquery.js", "static/js/contentscript.js"]
    }
],

Chrome扩展程序网址匹配模式：为什么规则不适用于Google.com？

2 个答案:

`manifest.json`

`my-google-style.css`