Question

我的扩展架构：

背景页面存储扩展状态。我认为这很好，因为将状态保留在一个位置可以使调试更加容易。
内容脚本根据扩展状态在网页上执行某些操作。
每次用户通过设置页面对扩展状态进行更新时，都会在后台页面中对其进行更新，然后，该页面会向内容脚本发送一条消息以相应地更新其数据。

通过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。

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

我开玩笑的人偶配置：

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

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

在Jest Puppeteer评估中拒绝访问扩展API

0 个答案: