如何从同一文件夹将 js 文件导入到 chrome 扩展中的 background.js答案

【问题标题】：How to import js file to background.js in chrome extension from the same folder如何从同一文件夹将 js 文件导入到 chrome 扩展中的 background.js
【发布时间】：2021-05-12 20:17:53
【问题描述】：

我在导入与“background.js”（脚本库）相同的库中的文件“score.js”时遇到问题。我是 js 和 chrome 扩展的新手。我查看了 require.js 并做到了这一点。

背景.html：

<!doctype html>
<html>
  <head>
    <title>Tab Manager</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Tab Manager</h1>
    <script data-main="scripts/score.js" src="scripts/require.js"></script>
  </body>
</html>

background.js：

// gets a dictionary of existing windows ids as keys and tab arrays as values.
function get_windows() 
{
    var window_dict = {};
    chrome.windows.getAll({populate:true}, windowArr =>{
        var i;
        for (i = 0; i < windowArr.length; i++) {
            var window = windowArr[i];
            var window_id = window.id;
            var tabs = window.tabs;
            window_dict[window_id] = tabs;
          }
        console.log(window_dict);
        main(window_dict);
    })
    
}

function starting_scores(window_dict)
{
    var scores = [];
    var i;
    var j = 0;
    var total_tabs = [];
    for (const [window_id, tabs] of Object.entries(window_dict)) {
        for (i = 0; i < tabs.length; i++){
            scores[j] = new Score(tabs[i], window_id);
            j = j++;
        }}
    return scores;
}

function main(window_dict)
{
    var scores = starting_scores(window_dict);
    console.log(scores);
}

get_windows();

score.js：

class Score
{   
    // Constructor
    constructor(tab, window_id)
        {
        this.window_id = window_id; // The window id of the window that contains the tab.
        this.tab = tab; 
        this.url = tab.url;
        this.active = tab.active; // If the tab is currently looked at then it's active.
        this.audible = tab.audible; // If the tab is playing audio then audible will be true.
        this.discarded = tab.discarded; // If the tab is already unloaded but not closed this will be true.

        /* If the new tab is active then the timer is set to zero because 
        the user hasn't spent any time not using the tab. Otherwise a timer starts. */
        if(this.active == true){
            this.timer == 0;}
        else{
            this.timer = performance.now;}
        }
    
    // Get methods
    getWindowId() {
        return this.window_id;
    }
    getTab() {
        return this.tab;
    }
    getUrl() {
        return this.url;
    }
    getActive() {
        return this.active;
    }
    getAudible() {
        return this.audible;
    }
    getDiscarded() {
        return this.discarded;
    }
    getTimer() {
        return this.timer;
    }

    // Set methods
    setWindowId(window_id) {
        this.window_id = window_id;
    }
    setTab(tab) {
        this.tab = tab;
    }
    setUrl(url) {
        this.url = url;
    }
    setActive(active) {
        this.active = active;
    }
    setAudible(audible) {
        this.audible = audible;
    }
    setDiscarded(discarded) {
        this.discarded = discarded;
    }
    setTimer(timer) {
        this.timer = timer;
    }
}

我正在尝试构建一个扩展程序，为每个选项卡的使用情况打分，然后删除得分低的选项卡。不要介意我无法让 score.js 在 background.js 中工作的逻辑

感谢任何帮助。

【问题讨论】：

标签： javascript google-chrome-extension requirejs

【解决方案1】：

@wOxxOm's answer 的更新，从 Manifest v3 开始，您不能使用 background.page，但可以直接将脚本加载为模块。

manifest.json

"background": {
    "service_worker": "background.js",
    "type": "module"
}

background.js

import Score from './score.js';

score.js

export default class Score

【讨论】：

【解决方案2】：

删除 require.js 并使用内置的 ES 模块导入。

manifest.json：

"background": {
  "page": "background.html"
}

background.html，整个文件只有一行：

<script src="background.js" type="module"></script>

background.js，在文件开头插入：

import Score from './score.js';

导入的脚本 score.js，改第一行：

export default class Score

记住，如果你不使用像 WebPack 这样的捆绑器/编译器，import 中的文件名必须包含路径（./ 表示“同一目录”）和文件扩展名，否则它将无法正常工作。一个模块的典型文件扩展名是.mjs。

【讨论】：

非常感谢。我在导入文件时遇到了很多麻烦，我认为 js 不适合我。这实际上是针对我正在做的一个学校项目，它很快就会到期。这对我帮助很大，使我能够继续编码。