我有一个网站有这个元素:
<input type="text" id="editpane_title" fnk="tt" maxlength="80" name="title" value="st benedict crucifix">
我想使用 Chrome 扩展获取和设置该输入的值:
{
"manifest_version": 2,
"name": "demo",
"version": "1.0",
"description": "demo",
"icons": { "16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png" },
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": [ "tabs" ],
"browser_action": {
"default_icon": {
"16": "icon16.png",
"24": "icon24.png",
"32": "icon32.png"
},
"default_title": "demo"
}
}
这是 background.js
:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.query({ active: true, lastFocusedWindow: true }, function (tabs) {
var title = document.getElementById('editpane_title').value;
alert(title);
});
});
而且警报根本没有出现。我多次尝试重新加载,但仍然失败。
我在这里错过了什么?
最佳答案
这里有两个问题。
首先,代码不工作,你不知道为什么。
alert is not showing up at all
您需要学习调试扩展以了解哪里出了问题。尝试自己解决问题很重要,即使您没有这样做。有谷歌自己有点过时的 tutorial主要涵盖弹出窗口,并且有一个关于后台脚本的规范问题:
Where to read console messages from background.js in a Chrome extension?
因此假设您遵循建议并尝试调试。你会很快了解到 alert
没有被调用,因为有一个异常(exception):
Uncaught TypeError: Cannot read property 'value' of null
这导致了第二个问题:document.getElementById('editpane_title')
找不到元素。
问问自己:哪个文档
在这里被引用了?或者更确切地说,为什么它会自动成为您正在查看的页面?
此时,您应该阅读 Architecture Overview .您将在那里学习:
- 后台脚本实际上位于它们自己文档中的一个单独的、不可见的选项卡中。
- 要访问可见页面的
文档
,您需要一个Content Script . - 要在它们之间传递数据,您必须使用 Messaging和/或
storage
API .
有了这些知识,您现在应该转向以下规范问题:
How to access the webpage DOM rather than the extension page DOM?
最后一点,您不应该使用 alert
来检查程序的状态,或者出于任何原因。
这种古老的机制是阻塞:它会阻止 JS 上下文执行任何操作,直到您关闭模态窗口。这搞砸了一些异步的扩展 API,并与浏览器的 native 组件交互。
事实上,在 Firefox WebExtensions 中你 expicitly can't use them from a background page .
所以,尽早改掉这个坏习惯:
printf
/echo
式调试的等价物是console.log()
,输出可访问,如调试部分所述.- 要提醒用户,您应该寻求其他 UI 功能,例如通知。
关于javascript - 如何在 Chrome 扩展中获取输入值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46460962/