google-chrome-extension - chrome 扩展 - 从没有弹出窗口的背景页面获取标签 url

Question

我希望能够获取用户所在选项卡的当前 url，而无需强制用户单击弹出按钮。我得到了一个脚本来计算用户单击弹出图标的位置，并且一切都按预期进行，但是为了尝试完成我当前的目标(无需按下按钮即可)，我将代码复制并粘贴到背景页面，并没有得到任何结果。我的猜测是我需要一些积极的听众或类似的东西。

这是我必须使用弹出按钮的 javascript

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
window.addEventListener("load", windowLoaded, false);
function windowLoaded() {
  chrome.tabs.getSelected(null, function(tab) {
        //doing stuff with the url
  });
}
</script>

Answer 1

根据打包应用程序的文档(对于扩展程序可能相同也可能不同)，您可以使用 chrome.app API 中的 onLaunched 事件在应用程序启动时运行代码:

// start doing something when the app first loads....
chrome.app.runtime.onLaunched.addListener(function() {
    // all your monitoring code will go here

});

请注意，如果构建一个扩展，并且您的扩展应该在浏览器加载后立即开始监听，您可能不需要声明“onLaunched”监听器。

此外，您需要监视事件选项卡的更改，假设您希望始终知道用户在当前事件选项卡中所在的 URL。 Chrome Tabs API包含大量信息，可帮助您使用扩展程序中的选项卡，例如，以下是监视事件选项卡更改的代码:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    console.info("This is the url of the tab = " + changeInfo.url);
    // do stuff with that url here....
});

如果用户更改事件选项卡中的 url，此处理程序将监视该更改:

chrome.tabs.onActivated.addListener(function(activeInfo) { .. }

但是， onActivated 的文档说明如下:

Fires when the active tab in a window changes. Note that the tab's URL may not be set at the time this event fired, but you can listen to onUpdated events to be notified when a URL is set.

因此，您很可能只使用 onUpdated 事件示例。

当您到达后台页面中的某个点时，您会遇到一个您希望将 JavaScript 注入(inject)其中的页面。例如，要使用 JavaScript 更改页面的背景颜色，您可以使用以下代码:

chrome.tabs.executeScript(null,
                           {code:"document.body.bgColor='red'"});

请记住，您的后台页面不能直接运行 JavaScript 或操作网页的 DOM；因此，您需要以这种方式注入(inject)代码，其中包括注入(inject)诸如 jQuery 之类的东西以及您需要的其他资源。

不要忘记在 manifest.json 中允许选项卡权限和背景页面:

/* in manifest.json */
"permissions": [
  "tabs", "http://*/*"
],
"background": {
  "scripts": ["background.js"]
},

要将 jQuery 注入(inject)页面，您基本上需要编写构建脚本元素的代码，然后将其注入(inject)页面:

chrome.tabs.executeScript(null,
    {code:
        "var script = document.createElement('script');" +
        "script.setAttribute('src', '//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js');" +
        "script.setAttribute('type','text/javascript');" +
        "document.getElementsByTagName('head')[0].appendChild(script);"

   }
);

双引号中的代码不会在您的后台页面中运行。相反，它在注入(inject)选项卡中的页面时运行。我对双引号内的内容使用单引号，这样解析器就不会混淆并引发字符串文字错误。

请注意，可能有一种更好、更简洁的方法可以将此类代码注入(inject)到页面中，但对于小型、次要的注入(inject)，这就足够了。

请记住，如果页面中已经注入(inject)了 jQuery，您可能会遇到冲突。