Trying to create a chrome extension that will copy data from browser Tab A and fill it in a form on browser Tab B

Question

Basically I'm trying to copy data from <input>s on one tab and then paste it into a form <input>s on another tab using a chrome extension.

The part that I'm having trouble with figuring out is how to transfer the data from one tab to the other and how to target the right tabs.

Copying data from the form inputs is just a simple document.getElementById(), I created a content.js that runs on the current tab when the extension icon is clicked.

Manifest

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

At this point the necessary data is stored within the name, street, and state variables. This is where I'm having trouble. Once I have the data stored in variables, how can I tell my extension to allow the user to target a new tab? The inserting of the data I can just do the same as above but reversed.

New tab:

document.getElementById("form1_name").value = name;
document.getElementById("form1_street").value = street;
document.getElementById("form1_state").value = state;

Perhaps there's a way I can use a popup.html from my extension that will have two buttons, one labeled source that will scrape the data on the current tab, then the user will change to the tab they want to paste, and the second button as destination that will input the data on the newly active tab?

There are many examples of using [messaging](https://developer.chrome.com/extensions/messaging) to transfer data or [executeScript's callback](https://stackoverflow.com/a/4532567). — wOxxOm, Sep 19 '16 at 16:31
Thank you for the guidance as I didn't know where to start. I posted the solution and ended up doing it using `chrome.storage` instead of message passing. — m1xolyd1an, Sep 20 '16 at 20:40

score 5 · Accepted Answer · answered Sep 20 '16 at 22:26

I ended up solving this issue by using the storage permission and chrome.storage.local.set(). No need for message passing. User clicks the source button on the popup.html which scrapes the data from the current active tab and stores it locally with chrome.storage. Then the user can navigate to the page they want to paste the data they click the target button on the popup and the data is called back from the 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; 
  });

MobDev · Answer 2 · 2016-09-19T20:25:43.737

You can use chrome.runtime messages for this purpose. The working scheme is when all communication between two tabs going throw background script.

Possible scheme is like this:

When you click 'source' button in your popup.html - inject to page script implements listening of input change and message to your background.js then, something like:

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

When you click 'target' button - inject to the target page script listening your message from background script:

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

And on background.js put logic, which will receive messages and broadcast it to all tabs, or tab, you maked as target, like:

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

Second variant - is open chrome.runtime.port in target page and sends messages to it from background page.

Read this: https://developer.chrome.com/extensions/messaging and this: https://developer.chrome.com/extensions/ runtime and extension section for more details

Thanks for setting me off in the right direction. I used a similar schematic but did it without using messaging and instead by using the `storage` permission in the manifest and then storing the data in an array inside of `chrome.storage.local.set()` — m1xolyd1an, Sep 20 '16 at 20:26

Trying to create a chrome extension that will copy data from browser Tab A and fill it in a form on browser Tab B

2 Answers2