在Chrome扩展程序中的JavaScript文件之间传输用户的输入？

这个问题是一种特定的问题。所以，我会尽量做到彻底。

我这样做是为了学习如何制作可以与网站交互的Chrome扩展。

这应该做的是接受输入字段的输入，即用户所写的内容，然后用该文本替换网站的特定部分。我使用的是Message Passing中描述的"简单一次性请求"，因为它有一个ID，很容易通过getElementById进行编辑。

简单地替换点击按钮时的"简单一次性请求"句子很容易，但当我试图获得用户的输入并将其插入文档时会出现问题。

这是我的代码：

manifest.json：

{
"manifest_version": 2,
"name": "document-editor-test",
"version": "1.0",
"permissions": [
"activeTab",
"cookies",
"storage"
],
"browser_action": {
"default_title": "Site Text Editor",
"default_popup": "menu.html"
}
}

content.js：

document.getElementById('button').addEventListener('click', function (evt) {
var inputText = document.getElementById('input').value;
var theValue = inputText;
chrome.storage.local.set({'value': theValue}, function(){
message('value saved');
});
chrome.tabs.executeScript({ file: 'replace.js' })
}, false);

replace.js：

var item = chrome.storage.local.get(null, function(){
message('Value gotten')
})
document.getElementById('simple').innerHTML = item;

menu.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
body {width: 200px;}
#text{ font-size: 13px; text-align: center;}
</style>
<body>
<input id='input' type="text" placeholder="Text Here">
<button id='button' class='button button'>Ok</button>
<script src="content.js"></script>
</body>
</html>

我尝试使用一个简单的存储脚本来保存值并通过文件解析它，但它只会使脚本打印出undefined。

将输入值传递到文档的解决方案是什么？

扩展弹出窗口是另一个页面，与选项卡中打开的网页无关：您的弹出脚本名称具有误导性/错误：它不是内容脚本，请将其重命名为例如menu.js
接受函数回调的Chrome API方法是异步，并返回函数回调内部的值。查看文档以查看可能的参数。

内容脚本中的chrome.storage.local.get调用错误，因此它按设计返回undefined，指定密钥名称并在回调中使用值：
```
var item;
chrome.storage.local.get('value', function(data) {
item = data.value;
document.getElementById('simple').innerHTML = item;
});
```
弹出窗口中的代码可能会导致异步API中出现竞争条件，因此在保存值之前注入内容脚本(理论上可能)。通过嵌套链接调用：
```
chrome.storage.local.set({'value': theValue}, function() {
message('value saved');
chrome.tabs.executeScript({ file: 'replace.js' });
});
```

相关内容

最新更新

热门标签：