chibat / chrome-extension-typescript-starter Goto Github PK

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

I am porting a vanilla extension, and the Fetch event for loading scripts fails with the error The FetchEvent for "chrome-extension://*****me.js" resulted in a network error response: the promise was rejected.

Steps to reproduce.

• create a ts file that would be the script injected into the page
• include the script in the webpack config
• include the script in the web-accessible resource key of the manifest
• build

  let s = document.createElement('script');

  s.src = chrome.runtime.getURL("me.js")
  s.onload = function () {
    //@ts-ignore
    this.remove();
  };

  (document.head || document.documentElement).appendChild(s);

While running code in content_script.js file, I get the following error in page where the extension runs : ReferenceError: $ is not defined.

I didn't changed anything in the default package.json file, and the manifest file look like this:

 "content_scripts": [
      {
          "matches": ["*://*.domain.com/*"],
          "js": ["js/vendor.js", "js/content_script.js"]
      }
  ],

Please note that the extension is running in dev watch mode.

Cheers! 🖖

I see here you managed to figure out how to use sendresponse:

I have an issue where whenever I use it, typescript returns the error "cannot find name sendResponse"

how did you fix this issue?

(I have @types/chrome added)

This repo can be changed into a template, in which when used as a template shows this as the template used.

Thank you author for making this template, it saved me a lot of time and helped me get started developing the extension.

I was trying to figure out why @tabler/icons-react is not tree-shaked. A solution I came across is to change tsconfig.json :

// content_script.tsx

// @ts-ignore
import { Icon123 } from "@tabler/icons-react";

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
  if (msg.color) {
    console.log(Icon123);
    console.log("Receive color = " + msg.color);
    document.body.style.backgroundColor = msg.color;
    sendResponse("Change color to " + msg.color);
  } else {
    sendResponse("Color message is none.");
  }
});



// tsconfig.json
{
  // ...other configs
  "moduleResolution": "bundler",
  "module": "ES6",
}
 
 

It helped reducing the both build time and bundled size . Might be a good improvement to this template

For the setting "moduleResolution": "bundler" : typescript/webpack can not to resolve the node module properly after changing the to module setting. Adding "moduleResolution": "bundler" helped fix the issue. It does require to bump the typescript version to 5 and above.

Test repo:
https://github.com/JackNgWeiMing/chrome-extension-typescript-starter-1/tree/test-tree-shake

Before

After

When installing dependencies using npm install the following warning is displayed:

npm WARN [email protected] No repository field.

Sorry it is possibly lack of knowledge from my end ...

but I was able to port a chrome extension I had ... everything is working fine, but Im not able to debug from vscode ...

I know I need the sourcemaps for it so I change the tsconfig to

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "sourceMap": true, // <--------------- here the change
        "rootDir": "src",
        "outDir": "dist/js",
        "noEmitOnError": true,
        "typeRoots": [
            "node_modules/@types"
        ]
    }
}

but if I compile it like that (with tsc) it gives me the runtime error:
Uncaught ReferenceError: exports is not defined ...

I know that can be related to the module in the tsconfig.json ...
but if i change it from

    "module": "commonjs",

to

    "module": "umd",   // or "amd"

it then doesnt find a chain of dependencies ... starting from "moment" ...

and if (instead of all that) I do "npm run build" it doesnt create the sourceMaps in order to debug from typescript ...

I will appreciate so much your help ....

Hi,

it would be great if you could add a license to your project so I know how it's intended to be used ;)
https://help.github.com/articles/licensing-a-repository/

Thanks & best regards,
Christoph

/Edit: I found a reference to the ISC-license in your package.json - so I assume this is the intended license?

I tried uncommenting the
//console.log("polling");
but it does not seem to be called

I am using inject technology to be able to access window object from my content scripts as per this example: https://gist.github.com/devjin0617/3e8d72d94c1b9e69690717a219644c7a
Everything was working fine until I added npm seedrandom to my inject file. Now when I build my project, inject file is modified in such a way that it no longer is working as it should. Tried various webpack settings, but with no luck. Should this be working by default using such a prebuild environment?

 "dependencies": {
    "seedrandom": "^3.0.5"
  },
  "devDependencies": {
    "@types/chrome": "0.0.158",
    "@types/jquery": "^3.5.14",
    "@types/seedrandom": "^3.0.4",
    "copy-webpack-plugin": "^9.0.1",
    "glob": "^7.1.6",
    "prettier": "^2.2.1",
    "rimraf": "^3.0.2 ",
    "ts-loader": "^8.0.0",
    "typescript": "^4.4.3 ",
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-merge": "^5.0.0"
  }

module.exports = {
    entry: {
      popup: path.join(srcDir, 'popup/popup.ts'),
      options: path.join(srcDir, 'options/options.ts'),
      background: path.join(srcDir, 'background/background.ts'),
      content: path.join(srcDir, 'content/content.ts'),
      inject: path.join(srcDir, 'inject/inject.ts'),
    //   vendor_inject: ['seedrandom'],
    },
    output: {
        path: path.join(__dirname, "../dist/js"),
        filename: "[name].js",
    },
    optimization: {
        splitChunks: {
            // name: "vendor",
            // chunks(chunk) {
            //   return chunk.name !== 'background';
            // },
            cacheGroups: {
                vendor: {
                  name: 'vendor',
                  chunks(chunk) {
                      return chunk.name !== 'background';
                    },
                },
                vendor_inject: {
                  test: /[\\/]node_modules[\\/](seedrandom)[\\/]/,
                  name: 'vendor_inject',
                  chunks: 'all'
                }
              }
        },
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"],
    },
    plugins: [
        new CopyPlugin({
            patterns: [{ from: ".", to: "../", context: "public" }],
            options: {},
        }),
    ],
};

There are references to a non-existent vendor.js file in manifest.json, options.html, and popup.html that should probably be removed.

Related to webpack/webpack#3486. Given this project was created for chrome extensions and has opinion to how files are chunked it seems the most appropriate place to address.

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  vendor.js (1010 KiB)
  background.js (612 KiB)
  popup.js (302 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  popup (1.29 MiB)
      vendor.js
      popup.js
  background (612 KiB)
      background.js

I'd wager most users of this project experience this issue.

Thank you for building the template. I tried to upgrade my Chrome manifest version to v3. Almost everything works, except that in the manifest.json, I can no longer include multiple js files for the background.service_worker (The replacement for background scripts in v2), and as such, I had to manually do npm run build twice, once, and then the second time with splitChunks in webpack.common.js is commented out so that the background.js contains all the required js stuff without the need of vendor.js.

What would be the solution so that Webpack can make an exception for background.js?
Also, do you have any plan to upgrade this repo to v3?

For context, this branch (https://github.com/FantasticoFox/VerifyPage/tree/mv3) contains the last commit which does the migration to v3.

Hey @chibat, thank you for creating this template, really helps code extensions faster. Today I noticed as I coded up a few more ts files, that they weren't compiled to js. I got it to work by adding more entries in webpack.common.js:

module.exports = {
    entry: {
        popup: path.join(__dirname, srcDir + 'popup.ts'),
        options: path.join(__dirname, srcDir + 'options.ts'),
        background: path.join(__dirname, srcDir + 'background.ts'),
        home: path.join(__dirname, srcDir + 'home.ts'), // ! 
        utils: path.join(__dirname, srcDir + 'utils.ts') // !

But this seems rather inefficient. How can we direct it to compile all files in the folder without manually specifying each of them?

Hello, first of all, thank you for this amazing template.
I want to use bootstrap react components and also bootstrap css for some styling.
I installed bootstrap react and bootstrap packages via npm.
Then I configured my webpack.config like this: { test: /\.css$/i, use: ["style-loader", "css-loader"], },
Then, when I enter a page, the bootstrap CSS that I've imported is overriding all the CSS rules of the page. I did some research but could not solve this problem. Any ideas? Thanks in advance.

NetBeans IDE:

When I add the following to the tsconfig.json also nothing happens:

        "types": [
            "chrome"
        ],

But when I add the following in any of the files it starts to work only after a while, not immediately, why? IDE Bug?

/// <reference types="chrome"/>

And still showing some error "Project: error: Cannot find type definition file for 'chrome'". But chrome object types are now picked up by IDE, I'm happy:

Once I load the extension in chrome, changes to content_script.ts don't seem to live reload.
A few notes:

• the generated file dist/js/content_script.js is updated
• changes to background.ts are propagated if I refresh the devtools for the background "page"
• changes to the popup are propagated if I close and reopen the popup

I have tried:

• reloading the page
• opening/closing the popup
• clicking "update" in the extensions panel

None of that worked, the only thing that worked was removing and re-adding the extension.

Any idea of why I have having this issue?
Thanks!

When installing dependencies using npm install the following warning is displayed:

npm WARN deprecated @types/[email protected]: This is a stub types definition for Moment 
(https://github.com/moment/moment). Moment provides its own type definitions, so you 
don't need @types/moment installed!