[Q/A] How to Inject script to main world

[pftom]

What happened?

I want inject a script to "main" world use content script like this:

var s = document.createElement('script');
s.src = chrome.runtime.getURL('afterContentScript.js');
s.onload = function () {
  console.log('hello main world');
};

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

It's works in normally domain, like github.com (Already add to match in content-script and web_accessible_resources`)

and my afterContentScript.js just following simple code:

// afterContentScript.js
window.arr = [];

then I open github.com, can find arr in console.

But it's weired when I use this injected code to localhost:/* or 127.0.0.1:/*, it report follow error:

and my afterContentScript.js is processed in the following result:

this processed code can runing at normlly domain like github.com, but cannot running at localhost or 127.0.0.1.

Wish your answer!

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

Uncaught TypeError: Cannot read properties of undefined (reading 'lastError')
    at Object.jYyvQ (runtime-bc0650a10d675f44.js:1:9713)
    at newRequire (afterContentScript.js:71:24)
    at afterContentScript.js:122:5
    at afterContentScript.js:145:3

My processed `afterContentScript.js` file, about :


modules[name][0].call(
        module.exports,
        localRequire,
        module,
        module.exports,
        this
      );

function newRequire(name, jumped) {
    if (!cache[name]) {
      if (!modules[name]) {
        // if we cannot find the module within our internal map or
        // cache jump to the current global require ie. the last bundle
        // that was added to the page.
        var currentRequire =
          typeof globalObject[parcelRequireName] === 'function' &&
          globalObject[parcelRequireName];
        if (!jumped && currentRequire) {
          return currentRequire(name, true);
        }

        // If there are other bundles on this page the require from the
        // previous one is saved to 'previousRequire'. Repeat this as
        // many times as there are bundles until the module is found or
        // we exhaust the require chain.
        if (previousRequire) {
          return previousRequire(name, true);
        }

        // Try the node require function if it exists.
        if (nodeRequire && typeof name === 'string') {
          return nodeRequire(name);
        }

        var err = new Error("Cannot find module '" + name + "'");
        err.code = 'MODULE_NOT_FOUND';
        throw err;
      }

      localRequire.resolve = resolve;
      localRequire.cache = {};

      var module = (cache[name] = new newRequire.Module(name));

    // here report error
      modules[name][0].call(
        module.exports,
        localRequire,
        module,
        module.exports,
        this
      );
    }

    return cache[name].exports;

    function localRequire(x) {
      var res = localRequire.resolve(x);
      return res === false ? {} : newRequire(res);
    }

    function resolve(x) {
      var id = modules[name][1][x];
      return id != null ? id : x;
    }
  }

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[louisgv]

Can you provide a reproducible repository?

[javaswing]

@louisgv I also had the same problem. Later, I will provide a reproducible repository. This Question appear only in dev model. When inject script the nested iframe in page. I guess it has something to do with HRM.

[nisshi-dev]

I have the same problem.

plasmo version: v0.55.0

[javaswing]

Can you tell me your target site link？My Applaction inject site need to login. So I can not provide a reproducible repository