Tasks automation with chrome extensions

Question

I'm trying to automate the task of taking customers data from an ebay page and inserting it into a form in another page. I used Imacros but i don't quite like it.

Are chrome extensions good for this kind of work?

And if yes, where the dom logic should go, on the background page or in the content script?

Can anyone provide me a simple example of code?

Answer 1

Task

What you need here is a Chrome extension with the ability to read DOM content of the customer page inside a tab with a content script, and then store the information and send it to another tab.

Basically, you'll need to:

1. Inject a content script in the customer page
2. Retrieve the data and send it to the background
3. Elaborate the data and send it to another content script, that will:
4. Insert the data in the form on another page

Implementation:

So, first of all, your manifest.json will need the permission to access the tabs and the URLs you need, plus the declaration for your background script, something like this:

{
    "manifest_version": 2,

    "name": "Extension name",
    "description": "Your description...",
    "version": "1",

    "permissions": [
        "<all_urls>",
        "tabs"
    ],

    "background": { "scripts": ["background.js"] }
}

Now, following the steps:

1. Add a listener to chrome.tabs.onUpdated to find the customer page and inject the first content script, plus find the tab with the form and inject the second script, all from background.js :

    chrome.tabs.onUpdated.addListener(function(tabID, info, tab) { if (~tab.url.indexOf("someWord")) { chrome.tabs.executeScript(tabID, {file: "get_data.js"}); // first script to get data } if (~tab.url.indexOf("someOtherWord")) { chrome.tabs.executeScript(tabID, {file: "use_data.js"}); // second script to use the data in the form } }); 

   Ok, now the above code will inject your get_data.js script in the page if its URL contains "someWord" and use_data.js if its URL contains "someOtherWord" (you must obviously replace "someWord" and "someOtherWord" with the right words to identify the correct page URLs).

2. Now, in your get_data.js you'll need to retrieve data and send it to the background.js script, using chrome.runtime.sendMessage , something like this:

    var myData = document.getElementById("some-id").textContent; // just an example chrome.runtime.sendMessage({messgae: "here is the data", data: myData}); 

3. Now you've sent the data, so inside background.js you'll need a listener to catch and elaborate it:

    chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if (request.message = "here is the data") { // elaborate it chrome.tabs.query({url: "*://some/page/to/match/*"}, function(tabs) { chrome.tabs.sendMessage(tab[0].id, {message: "here is the data", data: request.data}); }); } }); 

4. Ok, you are almost finished, now you'll need to listen to that message in the second content script, which is use_data.js , and use it in the form:

    chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if (request.message == "here is the data") { // use the data to do something in the page: var myData = request.data; // for example: document.getElementById("input-id").textContent = data; } }); 

And you are done!

Documentation

IMPORTANT : this wast just an example, and I strongly recommend you to check out the documentation to fully understand the functions and methods to use , here are some useful links:

• chrome.tabs
  • .query
  • .onUpdated
  • .sendMessage
  • .executeScript
• chrome.runtime
  • .onMessage
  • .sendMessage
• Chrome extension message passing