javascript - 尝试创建一个 chrome 扩展程序,它将从浏览器选项卡 A 复制数据并将其填写在浏览器选项卡 B 上的表单中

标签 javascript google-chrome google-chrome-extension

基本上我正在尝试从 <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/

相关文章:

javascript - 在哪里调用navigator.registerProtocolHandler?

python - 只有一个 python 程序在运行(比如 Firefox)?

javascript - 无法通过 chrome 扩展与 iFrame 交互

google-chrome-extension - Chrome 扩展透明背景和圆角(如 Save To Pocket)

javascript - 如何知道某个Node是否是HTML文档的Head?

javascript - 使用 Git Clone 安装 NPM

javascript - 在 Javascript 中迭代元素数组时,并非每个元素的类都会更新

google-chrome - Chrome Identity API - POST 请求

javascript - 为什么当我按下按钮时我的 onclick 函数没有激活?

javascript - 文件上传验证器 - jQuery/Javascript