Chrome扩展弹窗按钮无法打开options.html页面求助

你遇到的核心问题有两个：

1. popup.js加载失败（ERR_FILE_NOT_FOUND），导致按钮点击事件无法绑定
2. 打开options.html的路径写法不符合Manifest V3规范

1. 修复popup.js加载路径错误 #

你的popup.html位于html/文件夹下，引用src/popup.js时的相对路径有误，需从当前文件夹向上回溯到根目录，再进入src/目录：

修改popup.html中的script标签：

<script src="../src/popup.js" type="text/javascript"></script>

2. 修正打开options.html的代码 #

在Manifest V3中，扩展内部页面的URL需用chrome.runtime.getURL()生成，避免相对路径歧义，同时确保路径与文件实际位置一致：

修改popup.js的myfunction：

let openPageButton = document.getElementById("options-page");
openPageButton.addEventListener('click', myfunction);

function myfunction(){
    chrome.tabs.create({ url: chrome.runtime.getURL("html/options.html") });
}

3. 可选：优化Manifest配置（规范做法） #

如果希望Chrome扩展管理页面也能打开你的选项页，可在manifest.json中添加options_ui字段，同时无需保留web_accessible_resources（该字段用于外部网页访问扩展资源，扩展内部访问不需要）：

更新后的manifest.json：

{
    "name": "Block Site With Images",
    "version": "1.0",
    "manifest_version": 3,
    "action": {
        "default_popup": "html/popup.html",
        "default_title": "Block_Site"
    },
    "options_ui": {
        "page": "html/options.html",
        "open_in_tab": true
    }
}

内容的提问来源于stack exchange，提问作者Batel