2

我正在做一个扩展来自定义谷歌的主页背景。所以我在清单中写了一些匹配规则，如下所示：

"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 或其他东西有关。有人可以提供更多细节吗？以及如何防止在 url 更改后运行脚本？

4

2 回答 2

2

如果您想将样式应用到 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事件。为了响应这些事件，您将发送消息或执行内容脚本。

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

于 2013-07-29T17:42:44.407 回答
-1

您需要在*您的matches喜欢中包含一个通配符：

"content_scripts": [
    {
      "matches": ["https://www.google.com/*", "http://www.google.com/*"],
      "js": ["static/js/jquery.js", "static/js/contentscript.js"]
    }
],
于 2013-07-29T14:43:27.810 回答