iT邦幫忙

0

如何在background.js引入另一個js文件?

  • 分享至 

  • xImage

請問想在background.js引入另一個js文件, 應該怎麼寫?因為和popup/options page有用到同樣的function, 就集中放到common.js, popup/options都有html, 可以用<script src="common.js"></script>, 所以background.js 怎麼引入common.js?

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

2
Felix
iT邦研究生 2 級 ‧ 2022-05-27 06:39:05
最佳解答

依照下方指示放置 script 標籤,就能讓 background.js 取得 common.js 的函式了,除非 common.js 中沒有全域函式。

<script src="common.js"></script>
<script src="background.js"></script>

既然都回答了,就順帶一提引用 script 的方式吧!


Using jQuery

$.getScript('common.js');

Using Script Tag

function loadScript(src) {
    return new Promise(function (resolve, reject) {
        const script = document.createElement('script');
        document.body.appendChild(script);
        script.onload = () => resolve(!0);
        script.onerror = () => reject(!1);
        script.src = src;
    });
}
/* ES2015 */
loadScript('common.js').then(function () {
    /* ... */
});

/* ES2017 */
(async function () {
    if (!await loadScript('common.js')) return;
    /* ... */
})();

兩者擇一。
推薦後者,因為自己寫的才有成就感。

看更多先前的回應...收起先前的回應...
naimiliu iT邦新手 5 級 ‧ 2022-05-27 07:04:45 檢舉

background.js在manifest.json裡:

{
"manifest_version": 3,
...
"background": {"service_worker": "background.js"}

所以沒有<script src="background.js"></script>

Felix iT邦研究生 2 級 ‧ 2022-05-27 07:14:45 檢舉

看來是我誤會了。

如果 Service Worker 要引用外部腳本,請使用:

importScripts('common.js');

此外,如果 common.js 為 ES 模組,請改用:

{
    "background": {
        "service_worker": "background.js",
        "type": "module"
    }
}
import * from 'common.js';

/* ... */
naimiliu iT邦新手 5 級 ‧ 2022-05-27 07:21:55 檢舉

可以了, 感恩~

importScripts('common.js');

用這個就行了~

Felix iT邦研究生 2 級 ‧ 2022-05-27 07:25:37 檢舉

不客氣,但是要記得 Service Worker 沒有 DOM 架構哦!

我要發表回答

立即登入回答