我正在尝试编写我的第一个 Chrome 扩展程序。单击时,它会自动填写我大学登录页面的 ID 和密码字段(其表单的自动填写功能已禁用)。 这是一个非常具体的页面。
我有一些问题。 我搜索过 Google 和 SO,但找不到关于如何通过 Chrome 更改文本字段值的解释。我知道如何在 HTML 和 JavaScript 中执行此操作,但是我无法获得正确的输入来修改其文本。
我也试过使用 jQuery 和我发现的几个例子,但没有成功。 我有一个调用 JavaScript 文件的 HTML 页面 (popup.html)。 我也试过将 JS 放在内容脚本中
这是 manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "http://*/*"
],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["jquery-1.7.2.min.js","content.js"]
}
]
}
我对 popup.js(从 popup.html 调用)的尝试之一是:
chrome.tabs.getSelected(null, function(tab) {
console.log(document)
});
我也试过将这段代码放在 content.js 中。同样的结果, 它打印到控制台,但是它打印 popup.html 内容..
我也尝试过直接(通过上述方法)通过 document.getElementById()
直接访问元素,但仍然没有成功..
所以, 谁能告诉我我做错了什么?
最佳答案
您需要使用“web_accessible_resources”属性将 JavaScript 文件注入(inject)页面。看这里:
list .json
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"tabs", "http://*/*"
],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["jquery-1.7.2.min.js","content.js"],
"run_at": "document_start"
}
],
"web_accessible_resources": ["inject.js"]
}
注入(inject).js
(function () {
console.log('test');
}());
content.js
(function (chrome) {
var js = document.createElement('script');
js.type = 'text/javascript';
js.src = chrome.extension.getURL('inject.js');
document.getElementsByTagName('head')[0].appendChild(js);
}(chrome));
然后只要把你要使用的JavaScript代码放在inject.js中就可以操作页面了。请务必将匹配项更改为仅匹配您大学的登录页面。
出现这种情况的原因是,无论您在哪个网站上,Chrome 扩展程序都可以自行运行和操作。当您切换页面时,它们可以继续处理。他们在自己的沙盒环境中。
关于javascript - Chrome 扩展程序 - 编辑文本字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11852515/