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 built a tool that turns CSV exports into shareable dashboards User Avatar 41 comments From building client websites to launching my own SaaS — and why I stopped trusting GA4! User Avatar 41 comments $0 to $10K MRR in 12 Months: 3 Things That Actually Moved the Needle for My Design Agency User Avatar 33 comments The “Open → Do → Close” rule changed how I build tools User Avatar 32 comments I lost €50K to non-paying clients... so I built an AI contract tool. Now at 300 users, 0 MRR. User Avatar 26 comments Everyone is Using AI for Vibe Coding, but What You Really Need is Vibe UX User Avatar 23 comments