Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't install my custom chrome extension crx_magic_number_invalid

I made a simple chrome extension:

manifest.json:

{
  "name": "Layout VS Design",
  "version": "1",
  "description": "Enter the url of a image with your design at 100%",
  "background_page": "index.html",
  "browser_action": {
    "name": "Manipulate DOM",
    "icons": ["icon.png"],
    "default_icon": "icon.png"
  },
  "content_scripts": [ {
    "js": [ "jquery.min.js", "js.js" ],
    "matches": [ "http://*/*", "https://*/*"]
  }]
}

The thing is that chrome won't let me install it: enter image description here

The thing is I have no idea where to set this number, Any idea what can I try?

like image 960
Toni Michel Caubet Avatar asked Feb 14 '23 22:02

Toni Michel Caubet


2 Answers

The first thing I see is that your background_page isn't formatted properly. It should be

{ ...

   "background": {
       "page": "index.html"
    },
    ...
}

If you manifest.json file isn't formatted correctly, Chrome will reject the extension.

You can read more about the manifest formatting in the Manifest File Format documentation from Google.

Update

Another SO post detailed how Chrome looks for a "magic number" at the top of a .crx file. But, if you're hosting locally, you can install extensions in a simpler manner.

  • Save your manifest.json and background.html to a directory (the name doesn't matter)
  • Go to chrome:extensions
  • Make sure "Developer Mode" is checked at the top
  • Click "Load unpacked extension..."
  • Select the directory with your background and manifest files to install on Chrome.
like image 76
Brian Avatar answered Feb 16 '23 12:02

Brian


  1. go to extensions page
  2. check developer options
  3. click on pack extension
  4. set root directory (folder in which your images and manifest file exist)
  5. pack extension
  6. now disable developer options
  7. go to root directory (do not open root directory saying this only so that you could easily find file otherwise you can open it)
  8. you will see a .crx file just open it with chrome (e.g. drag and drop this file onto the chrome://extensions/ page)
  9. click on continue (will come at the bottom of chrome window)

Your Chrome browser is modified like you wanted

like image 42
Ayush Agarwal Avatar answered Feb 16 '23 12:02

Ayush Agarwal