Javascript 如何使用Chrome扩展监听url更改

我正在编写一个GoogleChrome扩展来自动化一些常见任务。我想要的功能如下：

创建新选项卡并导航到“我的网络邮件”

输入用户名和密码

点击“提交”按钮

等待webmail页面出现，然后选择“roundcube”客户端

我已经完成了步骤1、2和3，它们都很有效。提交凭据后，我在尝试侦听url更改时遇到了很多问题，因此选择roundcube客户端的函数可以运行

我知道当客户端选择页面出现时，我可以通过添加到清单中来运行脚本，但我想改用“chrome.tabs.executeScript”，这样只有在从chrome扩展运行脚本时，而不是手动转到客户端选择页面时，才会选择roundcube

这是我的manifest.json：

{
  "manifest_version": 2,

  "name"       : "Chrome Autobot",
  "description": "This extension will run various automation scripts for google chrome",
  "version"    : "1.0",

  "browser_action" : {
    "default_icon" : "icon.png",
    "default_popup": "index.html"
  },
  "permissions": [
    "activeTab",
    "webNavigation",
    "tabs",
    "http://*/*",
    "https://*/*"
  ]
}

这是我的chrome脚本：

jQuery(function($) {
    "Use Strict";

    var openWebmail = function() {
        chrome.tabs.create({
            url: 'http://mywebmaillogin.com:2095/'
        }, function() {
            chrome.tabs.executeScript(null, {file: "scripts/openEmail.js"});
        });
        chrome.tabs.onUpdated.addListener(function(){
            chrome.tabs.executeScript(null, {file: "scripts/openEmail.js"});
            alert('i work');
        });
    };

    var init = $('.script-init');
    init.on('click', function() {
        openWebmail();
    });

});

下面是要作为选项卡创建回调执行的内容脚本（当获取电子邮件登录页面并加载DOM时），以及当提交电子邮件凭据并加载客户端选择页面的DOM时（当前不起作用）

任何帮助都将不胜感激。。。谢谢

使用

Maifest.json

{
  "name": "My test extension",
  "version": "1",
  "manifest_version": 2,
  "background": {
    "scripts":["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["contentscript.js"]
    }
  ],
  "permissions": [
    "tabs"
  ]
}

contentscript.js

 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    alert('updated from contentscript');
 });

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    alert('updated from background');
});

background.js

 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    alert('updated from contentscript');
 });

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    alert('updated from background');
});

---

正如Nycompsci所提到的，您不能从内容脚本调用ChromeAPI。我能够通过消息传递将api数据传递给内容脚本，所以我想在这里分享一下。background.js中的第一个调用

onUpdated

：

显示 background.js 然后可以展开该脚本，将数据（包括新url）从background.js发送到内容脚本，如下所示：

background.js 现在，您只需在内容脚本中侦听该数据：

contentscript.js

---

希望这对别人有帮助！ʘʘ

基于/感谢@ztrat4dkyle的回答，什么对我有效：

manifest.json background.js

chrome.runtime.onInstalled.addListener（函数（）{
// ...
chrome.tabs.onUpdate.addListener（函数（tabId、changeInfo、tab）{
//changeInfo对象：https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/onUpdated#changeInfo
//状态更可靠（就我而言）
//使用“alert（JSON.stringify（changeInfo））”检查您的案例中可用和有效的内容
如果（changeInfo.status==‘完成’）{
chrome.tabs.sendMessage（tabId{
消息：“TabUpdated”
});
}
})
});

content.js

chrome.runtime.onMessage.addListener（函数（请求、发送方、发送响应）{
如果（request.message=='TabUpdated'）{
console.log（document.location.href）；
}
})

为什么需要在contentscript.js和background.js上分别添加两次这个tabs.onUpdate listener？您不必同时使用这两个选项，选择需要处理的选项。注意：在

background.js

中，回调函数接收相同的参数。contentscript.js不起作用，您不能从内容脚本调用chrome api，请参见此参考：您指的是什么“回调”？这可能是因为您的权限不允许数据传输，所以请确保您的清单是按上述方式设置的。我建议从上面的示例开始，并对其进行调整，因为它肯定在新的扩展中工作。我拥有所有权限，包括选项卡，但在这个模式中，我没有收到任何函数调用。悲哀。对不起，马塞洛，你不是很具体，所以很难在这里提供帮助。我建议通过在函数的第一行添加

console.log（data）

来解决问题，其中

data

是您试图使用的数据，并查看控制台是否存在。如果没有，您很可能会发现一个错误，您可以搜索帮助：）@ztrat4dkyle如何在第一页加载时发送消息？您好@RTW您的问题不是非常清楚，我认为您应该为您的问题打开一个新的问题，并提供一些示例。

chrome.tabs.onUpdated.addListener(function
  (tabId, changeInfo, tab) {
    // read changeInfo data and do something with it (like read the url)
    if (changeInfo.url) {
      // do something here

    }
  }
);

chrome.tabs.onUpdated.addListener(
  function(tabId, changeInfo, tab) {
    // read changeInfo data and do something with it
    // like send the new url to contentscripts.js
    if (changeInfo.url) {
      chrome.tabs.sendMessage( tabId, {
        message: 'hello!',
        url: changeInfo.url
      })
    }
  }
);

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    // listen for messages sent from background.js
    if (request.message === 'hello!') {
      console.log(request.url) // new url is now in content scripts!
    }
});

{
  ...
  "background": {
    "scripts":["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content.js"]
    }
  ],
  "permissions": [
    "tabs"
  ]
}