如何使用 Chrome 扩展程序侦听网址更改
How to listen for url change with Chrome Extension
我正在编写一个Google Chrome扩展程序来自动化一些常见任务。我想要的功能如下:
- 创建新标签页并导航到我的网络邮件
- 输入用户名和密码
- 点击"提交"按钮
- 等到网络邮件页面出现,然后选择"圆形立方体"客户端。
我已经完成了步骤 1、2 和 3,它们可以工作。提交凭据后,我在尝试侦听 url 更改时遇到了很多麻烦,以便选择圆形多维数据集客户端的函数可以运行
我知道当客户端选择页面出现时,我可以通过添加到我的清单来运行脚本,但我想改用"chrome.tabs.executeScript",以便仅当我从 chrome 扩展运行脚本时才选择 roundcube,而不是如果我手动转到客户端选择页面。
这是我的清单.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://*/*"
]
}
这是我的铬脚本:
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');
}
}()
任何帮助将不胜感激...谢谢!
如@NycCompSci所述,您无法从内容脚本调用 chrome api。不过,我能够通过消息传递将 api 数据传递给内容脚本,所以我想我会在这里分享。在后台onUpdated
首次调用.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
}
}
);
然后,您可以展开该脚本,将数据(包括新网址和其他 chrome.tabs.onUpdated 信息)从后台发送到您的内容脚本.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!
}
});
使用 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"
]
}
内容脚本.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');
});
基于/感谢@ztrat4dkyle的回答,什么对我有用:
manifest.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);
}
})
相关文章:
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 检查是否存在使用chrome扩展的javascript库
- 使用chrome扩展编辑页面html
- MVC JsonResult无法使用chrome
- 如何使用Chrome扩展API获取网页的所有HTTP请求
- 如何使用 Chrome 存储空间从对象中移除数据
- 引导导航选项卡在小提琴中工作,但在使用 Chrome 打开时则不工作
- 使用chrome.storage.get获取变量
- 使用chrome.downloads api发送referrer头
- SignalR使用Chrome上的服务器发送事件
- 使用Chrome扩展检测点击
- 是否可以使用chrome.tabs.sendmessage从内容脚本向背景页发送消息
- 如何使用Chrome'查看窗口对象中定义了哪些变量;的开发工具
- 使用chrome扩展,如何使用长寿命连接(端口)将消息从后台脚本传递到内容脚本
- 使用chrome.downloads.download,是否可以使文件不弹出下载栏
- d3中内容可编辑的ForeignObject无法使用chrome
- 如何使用Chrome文档中的文件而不是URL
- 仅使用Chrome进行慢速图像绘制
- Three.js效果使用firefox但不使用chrome
- 使用Chrome扩展内容脚本检测youtube视频事件