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

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?

Answer:1

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; 
  });
Answer:2

I'v been following a few walkthroughs on how to implement d3 charts in an angular application. Basically, Im trying to implement the following d3 chart into my custom angular directive ('workHistory')....

I'v been following a few walkthroughs on how to implement d3 charts in an angular application. Basically, Im trying to implement the following d3 chart into my custom angular directive ('workHistory')....

I am using D3 v4. I have a bar graph created with an x-axis using scaleBand(). Now, I have created a y-axis but my issue is that no matter how I position it, it is cutting into the actual bars of ...

I am using D3 v4. I have a bar graph created with an x-axis using scaleBand(). Now, I have created a y-axis but my issue is that no matter how I position it, it is cutting into the actual bars of ...

I'm using casperJS to try to get a screenshot of a DOM element using captureSelector, but the quality of the screenshot is really poor, but when capturing full screenshot using capture it works ...

I'm using casperJS to try to get a screenshot of a DOM element using captureSelector, but the quality of the screenshot is really poor, but when capturing full screenshot using capture it works ...

I am developing a windows desktop application using node.js and backbone.js. I want to perform an action when the user closes the app by clicking on the close button on the title bar or right clicking ...

I am developing a windows desktop application using node.js and backbone.js. I want to perform an action when the user closes the app by clicking on the close button on the title bar or right clicking ...