在chrome扩展中未加载指纹打印

Question

我试图在我的chrome扩展中加载fingerprintjs，但是由于某种原因它没有加载。文档说要使用这种方法，它在独立的网站上工作得很好，但在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

从html中删除fp.min.js的<script>标记，并在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);
}