0

I have the background.js, content.js, manifest.json files in thepublic folder. However, the file popup.js is in the foldersrc. Do I need to configure any paths to these files background.js, content.js, popup.js in themanifest.json file. Will these files be automatically linked if I transfer data between them?

structure folders

//app
    //public
        //background.js
        //content.js
        //manifest.json
    //src
        //popup.js

manifest.json

{
  "manifest_version": 2,
  "name": "chrome extension",
  "description": "Chrome extension",
  "version": "0.0.1",
  "content_scripts": [
    {
      "matches": ["https://*.app.com/*"],
      "js": ["content.js"]
    }
  ],
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "icons": {
    "16": "assets/icon-128.png",
    "48": "assets/icon-128.png",
    "128": "assets/icon-128.png"
  },
  "permissions": ["https://*.app.com/*", "storage"],
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
Umbro
  • 1,984
  • 12
  • 40
  • 99
  • 2
    The root directory is where manifest.json is so everything else should be **inside** this root. You can't have two roots. However in your build config file you may add a rule to merge/transform the paths correctly. – wOxxOm Nov 20 '19 at 09:56
  • @wOxxOm So can I move the `background.js, content.js, manifest.json` files to the` src` folder where the `popup.js` file is located? – Umbro Nov 20 '19 at 10:00
  • Certainly you can. I don't see why you've used `public` in the first place. – wOxxOm Nov 20 '19 at 10:05
  • Are you using CreateReactApp to build your extension? – hindmost Nov 20 '19 at 10:06
  • @wOxxOm I use bolierplate react-create-app. By default, such a `public` folder has been created, containing the` assets` folder, `manifest.json`. And `popup.js` (in my App.js) in the folder` src` – Umbro Nov 20 '19 at 10:08
  • @hindmost yes, I use react-create-app – Umbro Nov 20 '19 at 10:09
  • By default, [create-react-app](https://github.com/facebook/create-react-app) can't be used to build chrome extension since it makes only one entry point. Whereas an extension should have at least two entry points: background and popup (and content script in your case). – hindmost Nov 20 '19 at 10:12
  • @hindmost https://medium.com/@gilfink/building-a-chrome-extension-using-react-c5bfe45aaf36 – Umbro Nov 20 '19 at 10:16
  • @hindmost So with my current structure, which I gave in the above question, I can not do such a thing? Pass data between `content.js, background.js, popup.js`? I would like to do something like the answer was made by the user imlokesh https://stackoverflow.com/questions/58052348/access-localstorage-in-content-js-via-chrome-storage-sync-get-and-display-th – Umbro Nov 20 '19 at 10:21
  • BTW, `public` and `src` folder are only used as project sources by create-react-app, built/production app has different stucture (with single folder) – hindmost Nov 20 '19 at 10:22
  • _medium.com/@gilfink/…_ That simple example only deals with popup page and doesn't have background and content scripts. So you can't use it as bolierplate for your extension – hindmost Nov 20 '19 at 10:25
  • @hindmost Then I have a problem. Because I've practically completed my extension. I just wanted to do it to capture the localstorage token from another site and put it in my extension to login automatically. And for that I need background.js and content.js. Could I convert my current boilerplate react-create-app? – Umbro Nov 20 '19 at 10:30
  • Since you're apparently not familiar with Webpack, I'd suggest you to follow the guide lines from that post and move your background and content scripts to the `public` folder. Sadly, this means that these scripts must be static; you can't use Node modules there. – hindmost Nov 20 '19 at 15:59

0 Answers0