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
I'm a lawyer who launched an AI contract tool on Product Hunt today — here's what building it as a non-technical founder actually felt like User Avatar 150 comments A simple way to keep AI automations from making bad decisions User Avatar 63 comments “This contract looked normal - but could cost millions” User Avatar 54 comments Never hire an SEO Agency for your Saas Startup User Avatar 53 comments 👉 The most expensive contract mistakes don’t feel risky User Avatar 41 comments I spent weeks building a food decision tool instead of something useful User Avatar 28 comments