sending message to chrome extension from a web page

by

According to the official docs you should use postMessage in the sender and message event listener in the receiver.

Here is an example:

Your website’s page.html

var data = { type: "FROM_PAGE", text: "Hello from the webpage!" };
window.postMessage(data, "*");

Content script: (injected using chrome.tabs.executeScript(tabid, {code:...)

window.addEventListener("message", function(event) {
    // We only accept messages from ourselves
    if (event.source != window)
        return;

    if (event.data.type && (event.data.type == "FROM_PAGE")) {
        console.log("Content script received message: " + event.data.text);
    }
});

Here page.html (which is not a part of the extension) posts messages to itself, which are intercepted and inspected by the content script. The reverse is possible through similar means.

To pass from content script to extension, you will have to use one of the available message-passing techniques.

It looks complicated and it is somewhat complicated but all this mumbo-jumbo is very secure.

More Related Contents:

  1. How to open the correct devtools console to see output from an extension script?
  2. How to inject javascript into Chrome DevTools itself
  3. How to send message FROM native app TO Chrome extension?
  4. How to debug chrome devtools panel extension?
  5. Accessing console and devtools of extension’s background.js
  6. Can you access chrome:// pages from an extension?
  7. Obtaining Chrome Extension ID for development
  8. Chrome extension content script re-injection after upgrade or install
  9. Chrome extension is not loading on browser navigation at YouTube
  10. How to save CSS changes of Styles panel of Chrome Developer Tools?
  11. Chrome extension: accessing localStorage in content script
  12. Is it possible to require npm modules in a chrome extension ?
  13. Modify HTTP responses from a Chrome extension
  14. Google Chromecast sender error if Chromecast extension is not installed or using incognito
  15. Chrome extension to read HTTP response
  16. Optionally inject Content Script
  17. Access window variable from Content Script [duplicate]
  18. about chrome.tabs.executeScript( id,details, callback)
  19. Why will jQuery not load in Facebook?
  20. How is the Chrome Extension ID of an unpacked extension generated?
  21. Google Chrome – Alphanumeric hashes to identify extensions
  22. How do you integrate Universal Analytics in to Chrome Extensions?
  23. Chrome extension login best practices
  24. Does content_scripts matches “chrome-extension://*/*” work?
  25. Persistent background page on demand or an event page that doesn’t unload?
  26. Upload a File in a Google Chrome Extension
  27. jQuery in Google Chrome Content Script?
  28. Google Chrome Socket API in extensions
  29. chrome.commands keyboard shortcuts not working
  30. Chrome extension page action appearing outside of address bar

Leave a Comment