Question

基本上我尝试在一个标签页上复制<input>的数据，然后使用Chrome扩展程序将其粘贴到另一个标签页上的<input>表格中。

我遇到问题的部分是如何将数据从一个标签传输到另一个标签以及如何定位正确的标签。

从表单输入中复制数据只是一个简单的document.getElementById()，我创建了一个在单击扩展图标时在当前选项卡上运行的content.js。

清单

{
    "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"
    }
}

Background.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，它将在新激活的标签上输入数据？

Answer 1

我最终使用storage权限和chrome.storage.local.set()解决了这个问题。不需要消息传递。用户单击popup.html上的源按钮，该按钮从当前活动选项卡中抓取数据，并使用chrome.storage将其存储在本地。然后，用户可以导航到他们想要粘贴数据的页面，他们单击弹出窗口上的目标按钮，然后从chrome.storage回调数据。

<强>的manifest.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; 
  });

Answer 2

您可以将chrome.runtime消息用于此目的。工作方案是当两个标签之间的所有通信都抛出后台脚本时。

可能的方案是这样的：

点击“来源”＆＃39;你的popup.html中的按钮 - 注入页面脚本实现了对输入更改的监听和消息到你的background.js然后，类似于：

$("input#inputId").change(function() {
  chrome.runtime.sendMessage({"id":$(this).attr("id"),"val":$(this).val()}, function(response) {
  })
}

点击＆＃39;定位＆＃39;按钮 - 注入目标页面脚本，从后台脚本中侦听您的消息：

chrome.runtime.onMessage.addListener(function(msg){
    $("#"+msg.id).val(msg.val)
});

在background.js上放置逻辑，它将接收消息并将其广播到所有标签或标签，您将其作为目标，如：

chrome.tabs.sendMessage(tabs[0].id, msg,...)

第二个变体 - 在目标页面中打开chrome.runtime.port并从后台页面向其发送消息。

阅读本文：https://bugs.php.net/bug.php?id=69637 以及：https://developer.chrome.com/extensions/messaging运行时和扩展部分了解更多详情

尝试创建一个Chrome扩展程序，该扩展程序将从浏览器标签A复制数据并将其填入浏览器标签B

2 个答案: