Content script is emitted as an empty chunk about chrome-extension-tools HOT 5 CLOSED

@anarchylimes So, the plugin parses your manifest to find your content script.

// rollup.config.js

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'

import {
  chromeExtension,
  simpleReloader,
} from 'rollup-plugin-chrome-extension'

export default {
  // Point this to your manifest
  input: 'src/manifest.json',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    // always put chromeExtension() before other plugins
    chromeExtension(),
    simpleReloader(),
    // the plugins below are optional
    resolve(),
    commonjs(),
  ],
}

// manifest.json
{
  ...
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      // This path is relative to the manifest.json
      "js": ["libs/content.js"]
    }
  ],
  ...
}

from chrome-extension-tools.

I actually figured this out and it was because I was assuming it was cross browser compatible but firefox doesn't recognize how you're loading the content / background scripts. Even with the standard boilerplate it doesn't work. Maybe that's a stretch goal!

from chrome-extension-tools.

Whoops! My old GitHub enemy, Ctrl+Enter, closed another issue on me. 😒

Answer is forthcoming...

from chrome-extension-tools.

The above issue is no longer an issue, however there is another issue that I'm only encountering with this plugin

No I understand how it connects various files to the manifest. What I'm talking about is that the content script is not being injected into the page. see this simple setup.

{
  "manifest_version": 2,
  "name": "NAME",
  "version": "0.0.1",
  "description": "NAME DESCRIPTION",
  "permissions": ["activeTab", "tabs", "<all_urls>"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [
        "js/content/content.js"
      ]
    }
  ],
  "background": {
    "scripts": [
      "js/background/background.js"
    ]
  },
  "browser_action": {
    "default_icon": "img/logo.png",
    "default_title": "NAME",
    "default_popup": "html/popup.html"
  }
}

then inside of js/content/content.js

document.body.style.border = '5px solid red'

yet literally nothing is happening on the page when there should be a simple border around everything.

in the dist/ folder the manifest looks like this

{
  "manifest_version": 2,
  "name": "NAME",
  "version": "0.0.1",
  "description": "DEVELOPMENT build with simple auto-reloader\n[2020-10-12 17:05:52] waiting for changes...",
  "permissions": [
    "activeTab",
    "tabs",
    "<all_urls>"
  ],
  "content_scripts": [
    {
      "js": [
        "assets/content-script-reloader-90067bfc.js",
        "assets/content-b1554941.js"
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ],
  "background": {
    "scripts": [
      "assets/background-page-reloader-0ad65c2b.js",
      "assets/background-21b4d0ae.js"
    ],
    "persistent": true
  },
  "browser_action": {
    "default_icon": "img/logo.png",
    "default_title": "NAME",
    "default_popup": "html/popup.html"
  },
  "web_accessible_resources": [
    "js/content/content.js"
  ]
}

and the assets/content-b1154941.js looks like this

(function () {
	'use strict';

	const importPath = /*@__PURE__*/JSON.parse('"../js/content/content.js"');

	import(importPath);

}());

and finally that content.js has

document.body.style.border = '5px solid red';

so why is it that the content script isn't being injected when all the paths look correct?

from chrome-extension-tools.

@anarchylimes I copy pasted your code over and it works for me... 🤔

Make sure to reload the page the first time after you load the extension. Chrome only injects a content script when the page is loading.

I'm going to close this issue since this is a separate problem, but if you want to open a new issue and link to a repo that reproduces this problem, I'd be happy to look at it!

This boilerplate might be a good place to start.

from chrome-extension-tools.