在 Jest Puppeteer evaluateHandle 中拒绝访问扩展 API

Question

我的扩展架构：

1. 后台页面存储扩展状态。我认为这很好，因为将状态保存在一个地方可以使调试更容易。
2. 内容脚本根据扩展状态在网页上做一些事情。
3. 每次用户通过设置页面更新扩展状态时，它们都会在后台页面中更新，然后向内容脚本发送消息以相应地更新其数据。

我打算通过Jest+Puppeteer来模拟不同的状态变化并进行测试。为此，这是我的 MCVE 背景页面：

chrome.runtime.onInstalled.addListener(function (details) {
    if (details.reason === "install") {
        console.log("installed at " + new Date());
    }
});

window.sendMessage = function () {
    chrome.tabs.query({}, function (tabs) {
        if (chrome.runtime.lastError) {
            console.log(chrome.runtime.lastError.message);
        }

        console.log(tabs);
        if (!tabs) return;

        for (const tab of tabs) {
            if (tab.url && /^https:\/\//.test(tab.url)) {
                chrome.tabs.sendMessage(tab.id, { "message": "hey" });
            }
        }

    });
};
console.log("defined fn " + window.sendMessage)

还有以下test.js

/**
 * Wait for given milliseconds
 * @param {Number} milliseconds to wait
 */
function sleep(milliseconds) {
    return new Promise((resolve) => {
        setTimeout(() => resolve(), milliseconds);
    });
}

// some random webpages
const testURLs = [
    {
        url:
            "https://stackoverflow.com/questions/50990292/"
            + "using-octal-character-gives-warning-multi-character-character-constant",
    },
    {
        url:
            "https://serverfault.com/questions/971011/"
            + "how-to-check-if-an-active-directory-server-is-reachable-from-an-ubuntu-apache-ph",
    },
];

const usablePages = [],
    JEST_TIMEOUT = 60000;

/*
 * add this since jest's default timeout is 5s only; Loading a page might take longer
 */
jest.setTimeout(JEST_TIMEOUT);

async function getBackgroundPage() {
    const targets = await browser.targets(),
        backgroundPageTarget = targets.find(
            target => target.type() === "background_page",
        ),
        backgroundPage = await backgroundPageTarget.page();

    return backgroundPage;
}

async function sendMsgs() {
    const bgPage = await getBackgroundPage();
    await bgPage.evaluateHandle(`window.sendMessage();`);
}

beforeAll(async () => {
    for (const testURL of testURLs) {
        const usablePage = await browser.newPage();
        await usablePage.setViewport({ width: 1920, height: 1080 });
        await usablePage.goto(testURL.url);
    }
    // for debugging, so you can open console and check in 15secs
    await sleep(15000);
    sendMsgs();
    await sleep(15000);
});

it("simple test", function () {
    expect(2).toBe(2);
});

这段代码给了我以下runtime.lastError：

拒绝访问扩展 API。

我已经在我的manifest.json 中声明了["tabs", "<all_urls>"] 权限。我还能做些什么来解决这个问题？

我的玩偶配置：

const pathToExtension = require("path").join(__dirname, "dist");

module.exports = {
    launch: {
        headless: false,
        args: [
            `--disable-extensions-except=${pathToExtension}`,
            `--load-extension=${pathToExtension}`,
            "--single-process",
        ],
        sloMo: 250,
    },
};

Answer 1

我已经有一段时间遇到同样的问题，并且在删除时

  '--single-process'

从 puppeteer 的 args 看来，它确实有效。