javascript Chrome 扩展程序 - 编辑文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11852515/
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
Chrome Extension - edit a text field
提问by La bla bla
I'm trying to write my first Chrome extension. It would, when clicked, automatically fill the fields of an ID and password for my University's login page (which has its form's auto-fill disabled). It's a very specific page.
我正在尝试编写我的第一个 Chrome 扩展程序。单击它时，它会自动填写我大学登录页面的 ID 和密码字段（禁用了表单的自动填写）。这是一个非常具体的页面。
I have a few problem. I've searched Google and SO but couldn't find an explanation on how to change the value of a text field through Chrome. I know how to do this in HTML and JavaScript, however I couldn't get the proper input to modify its text.
我有几个问题。我搜索过 Google 和 SO，但找不到有关如何通过 Chrome 更改文本字段值的解释。我知道如何在 HTML 和 JavaScript 中执行此操作，但是我无法获得正确的输入来修改其文本。
I've also tried using jQuery using a few examples I've found, but no luck. I have an HTML page (popup.html) which calls a JavaScript file. I've also tried placing the JS in a content script
我还尝试使用我发现的一些示例来使用 jQuery，但没有成功。我有一个调用 JavaScript 文件的 HTML 页面 (popup.html)。我也试过将 JS 放在内容脚本中
Here's the manifest.json:
这是 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"]
}
]
}
One of my attempt of popup.js (which gets called from popup.html) is:
我对 popup.js（从 popup.html 调用）的尝试之一是：
chrome.tabs.getSelected(null, function(tab) {
console.log(document)
});
I've also tried placing this code inside the content.js. same result, It prints to console, however it prints the popup.html content..
我也试过将此代码放在 content.js 中。相同的结果，它打印到控制台，但是它打印 popup.html 内容..
I've also tried directly (and from the above method) to access an element directly by document.getElementById()but still no luck..
我也试过直接（和从上面的方法）直接访问一个元素，document.getElementById()但仍然没有运气..
So, Can anyone tell me what I'm doing wrong?
那么，谁能告诉我我做错了什么？
回答by Micah Henning
You need to inject a JavaScript file to the page using the "web_accessible_resources" attribute. See here:
您需要使用“web_accessible_resources”属性将 JavaScript 文件注入页面。看这里：
manifest.json
清单文件.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
注入.js
(function () {
console.log('test');
}());
content.js
内容.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));
Then just put the JavaScript code you want to use in inject.js to manipulate the page. Be sure to change matches to only match your University's login page.
然后只需将您要使用的 JavaScript 代码放入 inject.js 来操作页面。请务必将匹配项更改为仅匹配您大学的登录页面。
The reason this is the case is because Chrome extensions can run and operate on their own regardless of which website you're on. And they can continue to process as you switch pages. They're in their own sandboxed environment.
之所以出现这种情况，是因为无论您在哪个网站上，Chrome 扩展程序都可以自行运行和操作。他们可以在您切换页面时继续处理。他们处于自己的沙盒环境中。
回答by Fczbkk
I think you should use a simple content script that is executed on the login page. You don't even need any browser action or popup for that.
我认为您应该使用在登录页面上执行的简单内容脚本。您甚至不需要任何浏览器操作或弹出窗口。
Here's a manifest:
这是一个清单：
{
"name": "Fill my password",
"version": "1.0",
"manifest_version": 2,
"description": "Fills my password on University login page",
"content_scripts": [
{
"matches": ["http://www.myuniversity.edu/login.html"],
"js": ["content.js"]
}
]
}
And here's a content script:
这是一个内容脚本：
// define your username and password
var myUsername = '...';
var myPassword = '...';
// find the fiends in your login form
var loginField = document.getElementById('...');
var passwordField = document.getElementById('...');
// fill in your username and password
loginField.value = myUsername;
passwordField.value = myPassword;
// if you want, you can even automaticaly submit the login form
var loginForm = document.getElementById('...');
loginForm.submit();
回答by Jan.J
Possible workaround(chrome extension): Autocomplete = on, but it could not work with some forms.
可能的解决方法（chrome 扩展名）：Autocomplete = on，但它无法与某些表单一起使用。
