javascript - fingerprintjs 未在 chrome 扩展中加载

Question

我正在尝试加载 fingerprintjs在我的 chrome 扩展程序中，由于某种原因它没有加载。 文档说要使用这种方法，它在独立网站上运行良好，但在 chrome 扩展中不行

<script>
    function initFingerprintJS() {
      FingerprintJS.load().then(fp => {
        // The FingerprintJS agent is ready.
        // Get a visitor identifier when you'd like to.
        fp.get().then(result => {
          // This is the visitor identifier:
          const visitorId = result.visitorId;
          console.log("visitorId", visitorId);
        });
      });
    }
  </script>
  <script async src="fp.min.js" onload="initFingerprintJS();"></script>

对于 chrome 扩展，我添加了一个 JS 文件 initFingerprint.js，其中包含如下初始化代码:

var visitorId = null; //will hold the actual fingerprint
function initFingerprintJS() {
    console.log("inside initFingerprintJS");
    FingerprintJS.load().then(fp => {
        console.log("loaded initFingerprintJS");
        fp.get().then(result => {
            console.log("initFingerprintJS got result", result)
            visitorId = result.visitorId; // This is the visitor identifier
            console.log("visitorId", visitorId);
        });
    });
}
initFingerprintJS();

在 background.html 中，我添加了这个:

<script async src="fp.min.js"></script>
<script async src="initFingerprint.js"></script>

我已经尝试过在其中使用 async 而不是在其中，但仍然没有成功。这行将打印，但它下面的其他行都不会打印。

inside initFingerprintJS

我做错了什么？我感谢任何帮助。谢谢

Answer 1

删除 <script> fp.min.js 的标签从 html 并在 initFingerprint.js 中自己创建脚本元素，以便您可以使用 onload直接事件:

loadScript('fp.min.js').then(initFingerprintJS);

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const el = document.createElement('script');
    el.onload = resolve;
    el.onerror = reject;
    el.src = url;
    document.documentElement.appendChild(el);
  });
}

async function initFingerprintJS() {
  visitorId = await (await FingerprintJS.load()).get();
  console.log('visitorId', visitorId);
}