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

IT技术 javascript jquery google-chrome google-chrome-extension
2021-03-03 07:12:36

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

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

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

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

这是我的 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 时（这不是现在工作）

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

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

3个回答

正如 NycCompSci 所提到的，您不能从内容脚本中调用 chrome api。我能够通过消息传递将 api 数据传递给内容脚本，所以我想我会在这里分享。onUpdated在 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"
  ]
}

背景.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 信息）从 background.js 发送到您的内容脚本，如下所示：

背景.js

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

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

内容脚本.js

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

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

我拥有所有权限，包括选项卡，但在此架构中我没有收到任何函数调用。伤心。
2021-04-17 07:12:36
这是一个很好的方法，但是在我的情况下，changeInfo对象只有status属性，所以使用@SynergyChen 回答---您测试changeInfo.status属性，然后在传达消息后从内容脚本中获取 URL。
2021-04-28 07:12:36
你指的是什么“回调”？可能是您的权限不允许数据传输，因此请确保您的清单设置如上。我建议从上面的例子开始并调整它，因为它绝对适用于一个新的扩展。
2021-04-29 07:12:36
@ztrat4dkyle 如何在第一页加载时触发消息？
2021-05-01 07:12:36
抱歉，马塞洛，你不是很具体，所以在这里很难提供帮助。我建议通过console.log(data)在函数的第一行添加 a来解决问题，data您尝试使用的数据在哪里，并查看控制台以查看它是否存在。如果没有，您很可能会发现一个错误，您可以寻求帮助 :)
2021-05-05 07:12:36

使用chrome.tabs.onUpdated

文件.json

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

内容脚本.js

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

背景.js

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    alert('updated from background');
});
为什么你需要在 contentscript.js 和 background.js 上两次添加这个 tabs.onUpdated 监听器？
2021-04-17 07:12:36
contentscript.js 不起作用，您无法从内容脚本调用 chrome api，请参阅此参考：stackoverflow.com/questions/24024682/...
2021-05-05 07:12:36
您不必同时使用两者，选择您需要处理的一个。注意：在background.js回调函数中接收的参数相同。
2021-05-08 07:12:36

基于/感谢@ztrat4dkyle 的回答，对我有用的是：

清单文件.json

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

背景.js

chrome.runtime.onInstalled.addListener(function() {
  // ...

  chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    // changeInfo object: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/onUpdated#changeInfo
    // status is more reliable (in my case)
    // use "alert(JSON.stringify(changeInfo))" to check what's available and works in your case
    if (changeInfo.status === 'complete') {
      chrome.tabs.sendMessage(tabId, {
        message: 'TabUpdated'
      });
    }
  })
});

内容.js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.message === 'TabUpdated') {
    console.log(document.location.href);
  }
})
其它你可能感兴趣的问题
上一篇如何在 Jasmine JS 中重用 beforeEach/afterEach？ 下一篇ES8 立即调用异步函数表达式