chrome扩展 - 从后台页面获取标签网址而不弹出窗口

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

根据Packaged Apps的文档(扩展名可能相同或不同),您可以使用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分页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的文档说明如下:

窗口中的活动选项卡更改时触发.请注意,此事件触发时可能未设置选项卡的URL,但您可以侦听onUpdated事件,以便在设置URL时收到通知.

因此,您很可能只使用onUpdated事件示例.

当您到达后台页面中的某个点时,您会遇到要将JavaScript注入的页面.例如,要使用JavaScript更改页面的背景颜色,请使用以下代码:

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

请记住,您的后台页面无法直接运行JavaScript或操纵网页的DOM; 因此,您需要以这种方式注入代码,其中包括注入jQuery和其他您需要的资源.

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

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

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

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);"

   }
);

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

请注意,可能有更好,更清晰的方法将此类代码注入页面,但对于小的,次要的注入,这就足够了.

请记住,如果jQuery已经在页面中注入,则可能会遇到冲突.