wake-up-neo.com

So importieren Sie ES6-Module in Content Script für Chrome Extension

In Chrome 61 wurde die Unterstützung für Module in JavaScript hinzugefügt. Im Moment verwende ich Chrome 63.

Ich versuche herauszufinden, wie man Import-/Exportsyntax in Chrome-Erweiterungsinhaltsskripts verwendet, um Module zu verwenden.

In manifest.json :

"content_scripts": [ {

        "js": [
            "content.js"
        ],

In my-script.js im selben Verzeichnis wie content.js

'use strict';

const injectFunction = () => window.alert('hello world');

export default injectFunction;

In content.js 

'use strict';

import injectFunction from './my-script.js';
injectFunction();

Ich erhalte folgende Fehlermeldung: Nicht gefundener SyntaxError: Unerwarteter Bezeichner

Wenn ich die Importsyntax in import {injectFunction} from './my-script.js'; ändere, erhalte ich diesen Fehler: Uncog SyntaxError: Unerwartetes Token {

Gibt es ein Problem mit der Verwendung dieser Syntax in content.js in der Chrome-Erweiterung, da Sie in HTML die <script type="module" src="script.js">-Syntax verwenden müssen, oder mache ich etwas falsch? Es scheint seltsam, dass Google die Unterstützung für Erweiterungen ignorieren würde.

javascriptgoogle-chromegoogle-chrome-extensionecmascript-6
17
Ragnar

Ich habe es geschafft, einen Workaround zu finden .

Zunächst ist es wichtig zu erwähnen, dass Content-Skripts ab Januar 2018 keine Module unterstützen. Sie können dies jedoch tun, indem Sie das Modul-Script-Tag in die Seite einbetten, die zu Ihrer Erweiterung führt.

Das ist in meinem Manifest

"content_scripts": [ {
   "js": [
     "content.js"
   ]
}],
"web_accessible_resources": [
   "main.js",
   "my-script.js"
]

Beachten Sie, dass ich zwei Skripts in für das Web zugänglichen Ressourcen habe.

Mein content.js enthält nur diese Logik:

'use strict';

const script = document.createElement('script');
script.setAttribute("type", "module");
script.setAttribute("src", chrome.extension.getURL('main.js'));
const head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
head.insertBefore(script, head.lastChild);

Dadurch wird main.js als Modulskript in die Webseite eingefügt. Meine gesamte Geschäftslogik befindet sich jetzt in main.js und main, und alle Skripts, die ich importieren werde, müssen in web_accessible_resources im Manifest sein.

Dies ist der Beispielinhalt von my-script.js :

'use strict';

const injectFunction = () => window.alert('hello world');

export {injectFunction};

Und in main.js Dies ist ein Beispiel für das Importieren des Skripts:

'use strict';

import {injectFunction} from './my-script.js';
injectFunction();

Das funktioniert, es werden keine Fehler geworfen und ich bin glücklich :)

11
Ragnar

Wie bereits erwähnt, sollten Sie für das Hintergrundskript background.page und <script type="module"> verwenden, um Ihr JavaScript zu aktivieren.

Das Problem ist content script, und das Einfügen des <script>-Tags mit dem type-Attribut kann eine Lösung sein.

Ein anderer Ansatz als das Einfügen eines Skript-Tags ist die Verwendung der dynamic import-Funktion. Bei diesem Ansatz müssen Sie den Gültigkeitsbereich des Moduls chrome nicht verlieren und können trotzdem chrome.runtime oder andere Module verwenden.

In content_script.js sieht es so aus

(async () => {
  const src = chrome.extension.getURL("your/content_main.js");
  const contentMain = await import(src);
  contentMain.main();
})();

Für mehr Details:

Ich hoffe es hilft.

5
otiai10

Ich bin gerade über diese Frage gestolpert und habe versucht, dasselbe selbst zu lösen.

Ich denke, es gibt eine einfachere Lösung, um Ihre eigenen benutzerdefinierten Module in Ihr content-Skript einzufügen. Ich habe mir angesehen, wie Jquery injiziert wird, und es scheint mir, dass Sie dasselbe tun können, indem Sie einen iife _ (Sofort aufgerufener Funktionsausdruck) erstellen und ihn in Ihrem manifest.json deklarieren.

Es geht ungefähr so:

In Ihrem Manifest.json:

"content_scripts": [
{
  "matches": ["https://*"],
  "css": ["css/popup.css"],
  "js": ["helpers/helpers.js"]
}],

Dann erstellen Sie einfach eine IIFE in Ihrem helpers/helpers.js:

var Helpers = (function() {
  var getRandomArbitrary = function(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }
  return {
    getRandomArbitrary: getRandomArbitrary
  }
})()

Jetzt können Sie Ihre Hilfsfunktionen in Ihrem Inhaltsskript frei verwenden:

Helpers.getRandomArbitrary(0, 10) // voila!

Ich finde es toll, wenn Sie diese Methode verwenden, um einige Ihrer generischen Funktionen umzuwandeln. Hoffe das hilft!

2
Daniel Chan

Der beste Weg wäre, Bundler wie Webpack oder Rollup zu verwenden.

Ich bin mit der Grundkonfiguration durchgekommen

const path = require('path');

module.exports = {
  entry: {
    background: './background.js',
    content: './content.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, '../build')
  }
};

Führen Sie die Datei mit dem Befehl aus

webpack --config ./ext/webpack-ext.config.js

Bundler kombinieren die zugehörigen Dateien und wir können die Modularisierung in chrome extensions!: D

Sie müssen alle anderen Dateien wie Manifestdateien und statische Dateien im Erstellungsordner behalten.

Spielen Sie damit herum und Sie werden irgendwann einen Weg finden, es zum Laufen zu bringen!

0
Dhruvil Shah