Comments (5)
@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.
Related Issues (20)
- unable to run the dev script command HOT 3
- @crxjs/vite-plugin will break the build if build.rollupOptions.inputs added HOT 1
- Example won't work on firefox HOT 2
- [crx:manifest-post] Content script fileName is undefined: "src/content.ts" HOT 3
- Created manifest.json in build is not similar to what was passed using defineManifest in dev mode for Firefox HOT 1
- Build fails when development environment works. HOT 6
- Extensions do not work with Orion browser for iOS HOT 1
- Add support for Edge and Firefox HOT 2
- icons of different sizes are automatically generated during the compilation process HOT 1
- Notification in background script unable to load image in assets HOT 5
- HMR not working HOT 6
- npm run build generated an unnecessary .vite folder HOT 1
- Build fails when using a dynamic css import HOT 1
- Can not HMR an web-accessible-resources HOT 1
- Content Script HMR does not work with CSS Modules
- popup freezes on 'vite dev mode' after switching branchaes
- Rebase Manifest Schema and Types to DefinitelyTyped
- Path contains invalid characters HOT 1
- [crx:content-script-resources] RangeError: Maximum call stack size exceeded HOT 2
- Will pay someone to fix this: Unable to import a .webm file HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chrome-extension-tools.