0

There are several questions that handle passing of data from a content script to a background script:

How to pass an array from background.js to inject.js (content) script (Chrome Extension)

sendMessage from extension background or popup to content script doesn't work

but, to my knowledge, there are no answers on form handlers. As an example:

manifest.json:

{
  "manifest_version": 2,
  "name": "chrome-extension-bar",
  "description": "Chrome Extension Bar",
  "version": "1.0",

  "browser_action": {
    "default_title": "Chrome Extension Bar",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  
  "permissions": [
    "<all_urls>",
    "tabs"
  ],

  "content_security_policy": "script-src 'self' https://ajax.googleapis.com/ https://maxcdn.bootstrapcdn.com ; object-src 'self'"
}

popup.html:

<html>
    <head>        
        <script type="application/javascript" charset="utf-8" src="popup.js"></script>
    </head>

    <body class="body-popup">
         // nothing needed here
    </body>
</html>

popup.js:

chrome.tabs.executeScript({
     file: "add-extension-content-script.js"
}, function() {
     console.log("Added extension!");
})

add-extension-content-script.js:

var form_element = htmlToElement(
    `
        <div>
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="fname" value="John"><br>
            <button id="idSendButton" type="button" class="btn btn-secondary">Send</button>
        </form> 
    `
);

var current_title_bar = document.getElementById("global-nav");
current_title_bar.appendChild(form_element);

document.getElementById("idSendButton").addEventListener('click', function () {
    chrome.runtime.sendMessage({"name" : document.getElementById("fname").value}, function(response) {
        console.log('Got response: ' + response.farewell);
      });

});

How can I make the form send messages to the content script? The content script clicks buttons on the page upon receiving form input.

Sebi
  • 4,262
  • 13
  • 60
  • 116
  • Don't use `onClick` attribute in html, but instead use addEventListener with a function. Inside you will use chrome.runtime.sendMessage as shown in the [documentation](https://developer.chrome.com/extensions/messaging). – wOxxOm Mar 04 '21 at 15:01
  • But does addEventListener work in that form since it's been injected into the dom? I mean, does the loaded page "see" chrome.runtime.*? – Sebi Mar 04 '21 at 15:03
  • How should I change the form then? The button handler? – Sebi Mar 04 '21 at 15:04
  • :-) it takes just a few seconds to try so did you try it already? It will run in the context of the content script, which is why messaging will work. I've assumed sendName is declared in content script so if it's in page context you will need to keep the onclick attribute of course in addition to addEventListener. – wOxxOm Mar 04 '21 at 15:10
  • The Content Security Policy (CSP) prevents cross-site scripting attacks by blocking inline execution of scripts and style sheets. To solve this, move all inline scripts (e.g. onclick=[JS code]) and styles into external files. – Sebi Mar 04 '21 at 15:16
  • Do you have any handy example lying around? :)) Chrome hates inline javascript. I can't add vars to the injected element. – Sebi Mar 04 '21 at 15:17
  • Where sendName is defined? – wOxxOm Mar 04 '21 at 15:26
  • Added it in add-extension-content-script.js . But when looking at the source of the page I can't see it. – Sebi Mar 04 '21 at 15:32
  • Then just use any example, it'd be something like document.getElementById("idSendButton").addEventListener('click', sendName), and inside sendName use messaging. – wOxxOm Mar 04 '21 at 15:34
  • Alright. Added (edited question) but I still get the csp exception – Sebi Mar 04 '21 at 15:52
  • Where and when exactly do you see the exception? If you see it in chrome://extensions page then it's probably an old error, use the "clear all" button to remove it, otherwise use devtools to debug the code and find the exact moment the error occurs. – wOxxOm Mar 04 '21 at 16:17
  • Asked another question here https://stackoverflow.com/questions/66479036/event-listener-not-added-in-chrome-extension (will be likely closing this one). I no longer see any exceptions but now nothing happens when I click the button. No events, no console messages. – Sebi Mar 04 '21 at 16:24

0 Answers0