基本上我正在尝试从 <input>
复制数据s 在一个选项卡上,然后将其粘贴到表格中 <input>
在另一个选项卡上使用 chrome 扩展。
我难以弄清楚的部分是如何将数据从一个选项卡传输到另一个选项卡以及如何定位正确的选项卡。
从表单输入复制数据只是一个简单的 document.getElementById()
,我创建了一个 content.js,它在单击扩展图标时在当前选项卡上运行。
list
{
"name": "AnalystWizard",
"version": "1.0",
"manifest_version": 2,
"description": "Helping analysts since 2016",
"background" : {
"scripts" : ["background.js"]
},
"permissions": [
"tabs", "<all_urls>"
],
"browser_action": {
"default_icon": "icon.png"
}
}
背景.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "content.js"});
});
Content.js
var name = document.getElementById("fname").value;
var street = document.getElementById("street").value;
var state = document.getElementById("state").value;
此时必要的数据存储在 name
中, street
, 和 state
变量。这就是我遇到麻烦的地方。一旦我将数据存储在变量中,我如何告诉我的扩展程序允许用户定位新选项卡?数据的插入我可以像上面一样做但是相反。
新标签:
document.getElementById("form1_name").value = name;
document.getElementById("form1_street").value = street;
document.getElementById("form1_state").value = state;
也许有一种方法可以使用 popup.html
从我的扩展中将有两个按钮,一个标记为 source
这将抓取当前选项卡上的数据,然后用户将更改为他们想要粘贴的选项卡,第二个按钮为 destination
将在新激活的选项卡上输入数据?
最佳答案
我最终通过使用 storage
权限和 chrome.storage.local.set()
解决了这个问题。不需要消息传递。用户单击 popup.html
上的源按钮,它从当前事件选项卡中抓取数据并使用 chrome.storage
将其存储在本地。然后用户可以导航到他们想要粘贴数据的页面,他们单击弹出窗口上的目标按钮,数据从 chrome.storage
回调。
list .json
{
"name": "MyWizard",
"version": "1.0",
"manifest_version": 2,
"description": "Scrape data to new form",
"permissions": [
"tabs", "<all_urls>",
"storage"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
Popup.html
<html>
<body>
<button type="button" id="btnSource">Source Page</button><br>
<button type="button" id="btnTarget">Target Page</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
function doContent(){
chrome.tabs.executeScript(null, {file: "content_nomsg.js"});
};
function doTarget(){
chrome.tabs.executeScript(null, {file: "content2.js"});
};
document.getElementById("btnSource").onclick = doContent;
document.getElementById("btnTarget").onclick = doTarget;
content_nomsg.js
var fname = document.getElementById("j_id0:frmApp:frmAppBlock:j_id128:j_id130:0:j_id132:j_id133").value;
var lname = document.getElementById("j_id0:frmApp:frmAppBlock:j_id128:j_id130:0:j_id132:j_id134").value;
console.log("source page ran");
var storArray = {
src_fname: fname,
src_lname: lname
};
chrome.storage.local.set({
'newStorage': storArray
});
content2.js
console.log("target content2 ran");
var storedLegal = chrome.storage.local.get('newStorage', function (items) {
console.log(items);
document.getElementById("firstName").value = items.newStorage.src_fname;
document.getElementById("lastName").value = items.newStorage.src_lname;
});
关于javascript - 尝试创建一个 chrome 扩展程序,它将从浏览器选项卡 A 复制数据并将其填写在浏览器选项卡 B 上的表单中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39577842/