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

问题描述

我正在编写一个 Google Chrome 扩展程序来自动执行一些常见任务.我想要的功能如下:

I am writing a Google Chrome extension to automate some common tasks. The functionality I want is as follows:

1. 创建一个新标签并导航到我的网络邮件
2. 输入用户名和密码
3. 点击提交"按钮
4. 等待网页邮件页面出现，然后选择roundcube"客户端.

我已经完成了第 1、2 和 3 步，并且它们起作用了.我在提交凭据后尝试侦听 url 更改时遇到了很多麻烦，以便选择 roundcube 客户端的函数可以运行

I have completed steps 1,2,and 3 and they work. I am having a lot of trouble trying to listen for the url change after my credentials are submitted so that the function that selects roundcube client can run

我知道当客户端选择页面出现时我可以通过添加到我的清单来运行脚本，但我想改用chrome.tabs.executeScript"，这样只有当我从 chrome 扩展中运行脚本时才会选择圆形立方体，而不是如果我手动进入客户选择页面.

I know I can run a script when client selection page appears by adding to my manifest but I want to use "chrome.tabs.executeScript" instead so that roundcube is chosen only if I run the script from the chrome extension and not if I go to client selection page manually.

这是我的 manifest.json:

Here is my 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 脚本:

Here is my chrome script:

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 时(现在不工作)

and here is the content script to be executed as a callback of tab creation (when the email login page is fetched and the DOM has loaded), and also when the email credentials are submitted and the client selection page's DOM has loaded (which is not working right now)

var openEmail = function() {
    var loc = window.location.href;
    if(loc === 'http://mywebmaillogin.com:2095/') {
        var submit = document.getElementById('login_submit');
        user.value = 'myusername';
        pass.value = 'mypassword';
        if(user.value === 'myusername' && pass.value === 'mypassword') {
            submit.click();
        }
        else {
            openEmail();
        }
    }
    if(loc.indexOf('http://mywebmaillogin:2095/') > -1 && loc.indexOf('login=1') > -1) {
        alert('I work');
    }
}()

任何帮助将不胜感激...谢谢！

any help would be appreciated... thanks!

推荐答案

正如 NycCompSci 所提到的，您不能从内容脚本中调用 chrome api.我能够通过消息传递将 api 数据传递给内容脚本，所以我想我会在这里分享.首先在 background.js 中调用 onUpdated:

As mentioned by NycCompSci you cannot call the chrome api from content scripts. I was able to pass api data to content scripts with message passing though, so thought I'd share that here. First call onUpdated in background.js:

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

background.js

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

    }
  }
);

然后您可以扩展该脚本以发送数据(包括新的 url 和其他 chrome.tabs.onUpdated info) 从 background.js 到您的内容脚本，如下所示:

Then you can expand that script to send data (including the new url and other chrome.tabs.onUpdated info) from background.js to your content script like this:

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

现在您只需要在内容脚本中监听该数据:

Now you just need to listen for that data in your content script:

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!
    }
});

希望对某人有所帮助！ʘ‿ʘ

Hope that helps someone! ʘ‿ʘ

这篇关于如何使用 Chrome 扩展程序监听 url 更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！