2
5 Comments

Need help with a chrome extension I'm building

Hey guys, I'm building a chrome extension that needs to be able to read the user input from a text area like the gmail editor but I'm getting an error I can't figure out

"Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-o7tjeR1W8KWonrylAhjNqSfv5/cBGpQw16cP+4/E88I='), or a nonce ('nonce-...') is required to enable inline execution."

Has anyone faced this before? I tried stack overflow but the solutions are outdated and don't work anymore

posted to Icon for group Developers
Developers
on June 12, 2021
  1. 1

    You need to add something like this to your manifest.json file:
    "content_security_policy": "script-src 'self' https://fonts.googleapis.com/css 'unsafe-eval'; object-src 'self'"

    Not sure about the exact one for blob, but I hope that gives you a hint.
    Example from my code:
    manifest.json
    {
    "name": "",
    "version": "1",
    "description": "",
    "manifest_version": 2,
    "permissions": ["activeTab", "webNavigation", "storage", "tabs"],

    "icons": {
    "128": "assets/icon_128.png",
    "48": "assets/icon_48.png",
    "16": "assets/icon_16.png"
    },

    "background": {
    "scripts": [ "background.js","runtime.js", "scripts/jquery-3.4.1.min.js"],
    "persistent": true
    },

    "content_scripts": [

    ],

    "browser_action": {
    "default_icon": "assets/icon_16.png",
    "default_popup": "index.html"
    },

    "content_security_policy": "script-src 'self' https://fonts.googleapis.com/css 'unsafe-eval'; object-src 'self'"
    }

  2. 1

    As mentioned before, it would be good to see the code.

    I am probably not the best person to help, since I created my first extension this week (waiting for the review from Chrome/Firefox store), but maybe this will help.

    My extension:

    • I have a (1) popup.html and a (2) popup.js.
    • When the user clicks on my extension icon, the (1) popup.html is displayed.
    • Inside the (1) popup.html, I have a button "Activate Extension". When the user hits the button, I do something with all the input fields on the current page:

    So, on my (2) popup.js:

    // A) Add a listener to my button.
    document.getElementById("activateExtension")  .addEventListener("click", async () => {
    const currentBtn = document.getElementById("activateExtension");
    
    // B) I get the current tab information.
    let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    
    // C) I run the code inside my "getFormFields" function on the current tab.
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      function: getFormFields,
    });
    });
    

    On the same (2) popup.js file, I have that function ("getFormFields"):

    function getFormFields() {
    let inputs;
    
     // D) Reference to all the "input" tags on the current tab.
    inputs = document.getElementsByTagName("input");
    
    // DO SOMETHING HERE...
    }
  3. 1

    People would need to look at code in order to solve a dev bug. One common reason for this error is when you try to run inline javascript instead of including it via file, as it is mentioned in the error.
    So make sure you js is extracted to an external file and included in html file via script tags.

    1. 1

      Thanks for the reply. Can I DM you some follow ups?

  4. 1

    This comment was deleted 5 years ago.

Trending on Indie Hackers
Two Votes on Product Hunt → 2,000+ Users in Three Weeks Anyway 😌 User Avatar 56 comments AI Is Destroying the Traditional Music Business and Here’s Why. User Avatar 34 comments Fixing my sleep using public humiliation and giving away a Kindle User Avatar 23 comments The best design directories to show off your work User Avatar 13 comments Retention > Hype: What Are We Really Chasing as Builders? User Avatar 9 comments A growth tool built for indie developers: Get influencer marketing done in 10 minutes and track the results. User Avatar 8 comments