1

I am trying to build a simple chrome extension to get a value from a page and populate a second page after. I'm new to chrome extensions, and I'm really only doing this to make something I have to do often simpler.

So I got the part where I open the first page, get the value I need and then I open the second page in another tab. Now I'm not sure how to populate the field.

Since I already have the value on content.js, is it possible to know when the other tab has loaded to just look for the field where i need to put that value in? Or is there another way to do it? I can't get it to work.. I also tried to listen to page loads, but I don't think that will help me, as I'm only interested in one particular page.

Manifest:

{
  "manifest_version": 2,
  "name": "my Extension",
  "version": "1",
  "content_scripts": [
      {
        "matches": [
          "<all_urls>"
        ],
        "js": ["jquery-3.2.1.min.js", "content.js"]
      }
  ],
  "browser_action": {
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["background.js"]
  }
}

background.js

// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
  // Send a message to the active tab
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
  });
});

// 
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "open_new_tab" ) {

      chrome.tabs.create({"url": request.url}, 
                         function(tab){ alert(tab.id) });

    }
  }
);

chrome.tabs.onUpdated.addListener(function (tabId , info) {
  if (info.status === 'complete') {
    chrome.tabs.sendMessage(activeTab.id, {"message": "page_loaded"});
  }
});

content.js

chrome.runtime.onMessage.addListener(  
    function(request, sender, sendResponse) {        

        if( request.message === "clicked_browser_action" ) {

          var myUrl = "http://www.google.com";

            var myValue = document.getElementById("thisId").value;
            if(myValue ) {

                chrome.runtime.sendMessage({
                    "message": "open_new_tab", 
                    "url": myUrl, 
                    "myValue ": myValue 
                });
            }
        }   

        if( request.message === "page_loaded" ) {
            alert("hi");

        }    

});
solar apricot
  • 353
  • 2
  • 5
  • 24
  • You can open new tab using below code. var newURL = "yourpageurl"; chrome.tabs.create({ url: newURL }); }); – Aefits Jun 29 '17 at 18:35
  • @Shahid I can open the page. I don't know how to get the value I got it in the other page and populate the field I want on the newly opened page – solar apricot Jun 29 '17 at 19:25
  • Use localstorage to save and retrive the value. – Aefits Jun 29 '17 at 20:49
  • Is `myValue` the value you are wanting to insert into the new page? In other words, does the background script already have the information? – Makyen Jun 29 '17 at 21:36
  • 1
    Related/possible duplicate: [Pass a parameter to a content script injected using chrome.tabs.executeScript()](https://stackoverflow.com/q/17567624) – Makyen Jun 29 '17 at 21:38
  • hi @Makyen, yes I actually do have myValue in the background script. What I haven't figured out how to do is to read it in the second website after it got loaded. as far as i understand, background script won't be able to modify content on the page, that's what content scripts do. And I can't get content.js to run again on the second page. I still haven't found a way to do it – solar apricot Jul 06 '17 at 18:37
  • Then the above linked question combined with the following answer will solve your problem: [From a browser action popup: open a new tab and fill input fields](https://stackoverflow.com/a/41094570) – Makyen Jul 06 '17 at 19:27
  • In addition, you should look at: [Is there a JavaScript/jQuery DOM change listener?](https://stackoverflow.com/q/2844565) – Makyen Jul 06 '17 at 20:07
  • Given that you have not specified the specific field to be filled, there is no way for us to provide specific code to do what you desire. – Makyen Jul 06 '17 at 20:19
  • Note that you will also need the `` permissions in your *manifest.json* in order to inject code into in all URLs. – Makyen Jul 06 '17 at 20:24

0 Answers0