如何使用Chrome扩展程序侦听网址更改 [英] How to listen for url change with Chrome Extension

问题描述

我正在撰写谷歌浏览器扩展程序以自动执行一些常见任务。我想要的功能如下：

1. 创建一个新选项卡并导航到我的webmail


2. 输入用户名和密码
   
3. 点击提交按钮


4. 等待webmail页面出现，然后选择roundcube客户端。

我已完成步骤1,2和3并且它们正常工作。我在提交凭据后尝试侦听URL更改时遇到了很多麻烦，以便选择roundcube客户端的功能可以运行。

我知道我可以运行当客户端选择页面出现时，通过添加到我的清单，但我想使用chrome.tabs.executeScript，而不是仅当我从chrome扩展运行脚本时才选择roundcube，而不是在手动转到客户端选择页面时选择脚本。

这是我的manifest.json：

  {
manifest_version：2，
 
name：Chrome Autobot，
description：该扩展将运行谷歌浏览器的各种自动化脚本，
版本：1.0，
 
browser_action：{
default_icon：icon.png，
default_popup：index.html
 
permissions：[
activeTab，
webNavigation，
标签，
http：// * / *， 
https：// * / *
] 
} 
  
 
 
 
以下是我的chrome脚本： 
 
 
  jQuery（function（$）{
使用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已经被加载时（现在不工作） 
 
 
  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（）; （loc.indexOf（'http：// mywebmaillogin：2095 /'）> -1&&& loc.indexOf（'login = 1'）> 
} 
} 
> ; -1）{
 alert（'我工作'）; 
} 
}（）
  
 ！       使用 chrome.tabs.onUpdated  
 
 
 
  Maifest.json  
  {
name：My test extension，
version：1，
manifest_version：2 ，
background：{
scripts：[background.js] 
}，
content_scripts：[
 {
匹配：[http：// * / *，https：// * / *]，
js：[contentscript.js] 
} 
] ，
权限：[
标签
] 
} 
  
  contentscript.js  
  chrome.tabs.onUpdated.addListener（
函数（tabId，changeInfo，tab）{
 window.console.log（'from contentcript'更新）; 
} 
）; 
  
  background.js  
  chrome.tabs.onUpdated.addListener（function（）{
 alert（'from background'）; 
}）; 
  
 
I am writing a Google Chrome extension to automate some common tasks. The functionality I want is as follows:

Create a new tab and navigate to my webmail
enter username and password
click "submit" button
Wait until the webmail page appears, and choose the "roundcube" client.
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

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.

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://*/*"
  ]
}
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();
    });

});
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!
解决方案
use chrome.tabs.onUpdated

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) {
    window.console.log('updated from contentscript');
  }
);
background.js
    chrome.tabs.onUpdated.addListener(function() {
  alert('updated from background');
});


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