Javascript 如何使用 Chrome 扩展程序监听 url 更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34957319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to listen for url change with Chrome Extension
提问by HelloWorld
I am writing a Google Chrome extension to automate some common tasks. The functionality I want is as follows:
我正在编写一个 Google Chrome 扩展程序来自动执行一些常见任务。我想要的功能如下：
- 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.
- 创建一个新选项卡并导航到我的网络邮件
- 输入用户名和密码
- 点击“提交”按钮
- 等到 webmail 页面出现，然后选择“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
我已经完成了第 1、2 和 3 步，并且它们起作用了。我在提交凭据后尝试侦听 url 更改时遇到了很多麻烦，以便选择 roundcube 客户端的函数可以运行
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.
我知道我可以通过添加到我的清单来在客户端选择页面出现时运行脚本，但我想改用“chrome.tabs.executeScript”，这样只有当我从 chrome 扩展程序运行脚本时才选择圆形立方体，而不是我去时手动到客户端选择页面。
Here is my manifest.json:
这是我的 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:
这是我的 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();
});
});
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)
这是要作为选项卡创建回调执行的内容脚本（当获取电子邮件登录页面并加载 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');
}
}()
any help would be appreciated... thanks!
任何帮助将不胜感激...谢谢！
采纳答案by Shubham
Maifest.json
文件.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
内容脚本.js
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
alert('updated from contentscript');
});
background.js
背景.js
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
alert('updated from background');
});
回答by ztrat4dkyle
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 onUpdatedin background.js:
正如 NycCompSci 所提到的，您不能从内容脚本中调用 chrome api。我能够通过消息传递将 api 数据传递给内容脚本，所以我想我会在这里分享。onUpdated在 background.js 中的第一次调用：
Manifest
显现
{
"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
背景.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
}
}
);
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:
然后您可以扩展该脚本以将数据（包括新 url和其他 chrome.tabs.onUpdated 信息）从 background.js 发送到您的内容脚本，如下所示：
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
})
}
}
);
Now you just need to listen for that data in your content script:
现在您只需要在内容脚本中监听该数据：
contentscript.js
内容脚本.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!
}
});
Hope that helps someone! ???
希望对某人有所帮助！？？？
