2

I made a small Chrome extension that automates field population for myself; that just currently works off a onkeydown event listener on my document, that runs through the content.js file.

Additionally I have a popup menu (with popup.html and popup.js) that has a few handy links for me.

I'm trying to get one of the links in the popup menu create a small dialog (or popup browser window) that will contain a few links itself (perhaps on a html page), that when pressed, will populate some of the fields on the document it was opened on; similar to how the event listener does.

Currently I have a link, in my pop up, that just opens a 'popup' browser window, but I can't find how to get it to access the document it was opened on. Code as follows:

popup.js:

function newPopup(url) {
 popupWindow = window.open(url,'popUpWindow','height=300,width=400,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}

var link;

window.onload = function(){
 link = document.getElementById('templates');
 link.addEventListener('click', continueScript);
}
 
function continueScript(){
 newPopup('https://www.example-site.com/');
}

popup.html:

 <script src="popup.js"></script>
  <li><a class="templates" id="templates" href="#"><i class="fa fa-wpforms"></i>Templates</a></li>

The field population simply works of a value editing principle, as demonstrated below:

function fillForms(summary, description) {
                document.getElementById('example1').value = summary;
                document.getElementById('example2').value = description;
                document.getElementById('example2').focus();
                
              }

Thanks for the help!

Tym
  • 65
  • 7
  • "but I can't find how to get it to access the document it was opened on" - where do you try to access it? The opened page is a web page so it needs to run a content script which then will be able to do something inside. Also, you can't directly access a cross-origin document's data so you'll have to use messaging e.g. anotherWindow.postMessage() – wOxxOm Jul 12 '18 at 05:24

1 Answers1

2

This goal is perfectly achievable with chrome extension messages. The example below shows how to change background color of the document by clicking on a link in the dialog window. Please make sure that your manifest.json contains activeTab permission:

"permissions": [
  "activeTab"
]

First, create a dialog.html file and link the function in your popup.js to it:

function continueScript(){
    newPopup('dialog.html');
}

dialog.html:

<!doctype html>
<html>
  <head>
    <title>Dialog</title>
    <script src="dialog.js"></script>
  </head>
  <body>
    <a id="link" href="#">Change body color</a>
  </body>
</html>

dialog.js:

window.onload = function() {
  var link = document.getElementById('link');
  link.addEventListener('click', () => {
    // Get active tab.
    chrome.tabs.query({active: true}, (activeTabs) => {
      const tabId = activeTabs[0].id;
      const message = {
        backgroundColor: 'green'
      };
      const responseCallback = (responseMessage) => {
        // do something with the response if any ...
      };
      // Send a message to the content script of the active tab.
      chrome.tabs.sendMessage(tabId, message, {}, responseCallback);
    });
  });
};

Then add a listener for the message in the content script.

content.js:

window.onload = function() {
  // Listen for a message from dialog.js and send a response if needed.
  chrome.runtime.onMessage.addListener((message, sender, response) => {
    // Do stuff in your document.
    document.body.style.backgroundColor = message.backgroundColor;
  });
};

The same way you can pass and fill in the fields values.

References:

popup window in Chrome extension

https://developer.chrome.com/extensions/tabs#method-query

https://developer.chrome.com/apps/runtime#event-onMessage

Konst_
  • 114
  • 4
  • 4
  • Thank you for this solution! From what I can see this should definitely work; but when I apply it (almost code for code), it doesn't seem to work. From some basic debugging, it seems the "onMessage" event is never fired. I have even tried with different actions (instead of background colour changing). – Tym Jul 13 '18 at 12:46
  • Any chance you didn't reload the extension after editing content.js? That might be the reason why the changes didn't apply. If so, go to chrome://extensions and click a refresh icon at the right bottom of your ext. – Konst_ Jul 13 '18 at 14:11
  • Disregard my previous message! So sorry, your method works flawlessly. The issue was on my end, I was dealing with an embedded web-page (via an iframe), due to how one of the systems I've automated works. This method doesn't extend down to iframes, but I think that is more to do with how they load after the document, and the event listener does not attach to it properly. – Tym Jul 13 '18 at 14:27