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 -

admin管理员组

文章数量:1325236

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?

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?

• javascript
• google-chrome
• google-chrome-extension

Share Improve this question Follow edited Sep 20, 2016 at 22:25 m1xolyd1an asked Sep 19, 2016 at 16:28 m1xolyd1anm1xolyd1an 53555 silver badges1818 bronze badges 2

• There are many examples of using messaging to transfer data or executeScript's callback. – woxxom Commented Sep 19, 2016 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 Commented Sep 20, 2016 at 20:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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; 
  });

You can use chrome.runtime messages for this purpose. The working scheme is when all munication 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./extensions/messaging and this: https://developer.chrome./extensions/ runtime and extension section for more details

本文标签：