无法通过 Chrome 扩展弹出窗口创建 JS 弹出窗口

Question

我正在尝试创建我的第一个 Chrome 扩展，但我有一些问题无法使我的 JS 正常工作。我想要做的就是，当我单击 "Activer" 时，它会显示一个显示 "hello" 的弹出窗口。

这是我在 github 中找到的一个代码，我试图适应我的代码。当我检查我的扩展程序时，我收到如下错误：

Unchecked runtime.lastError while running tabs.executeScript: Cannot access contents of url "http://whosebug.com/questions/ask". Extension manifest must request permission to access this host.
at HTMLDivElement.hello (chrome-extension://clolnlfhhjonbfknjgebnmnfanpmcono/popup.js:4:15)

这是我的 manifest.json

{
"name": "e-kootsa",
"version": "1.0",
"manifest_version": 2,
"description": "Ce plugin vous permet d'écouter le texte d'une page",
"browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
},
"options_page": "options.html"
}

这是我的 popup.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
body{
    margin: 0px;
    padding: 0px;
    font-family: Arial, Sans-serif;
    font-size: 20px;
    width: 200px;
}
.selection{
    text-align: center;
    margin-bottom: 5px;
}
.global{
    padding-top: 5px;
}

a{
    text-decoration: none;
    color: #000;
}
</style>
</head>
<body>
<div class="global">
    <div class="selection"><a href="options.html" target="_blank">Paramètres</a></div>
    <hr />
    <div class="selection" id="clickme"><a href="#">Activer</a></div>
    <hr />
    <div class="selection"><a href="about.html" target="_blank">À propos</a>        </div>
</div>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>

这里是popup.js

// var app = chrome.runtime.getBackgroundPage();

function hello() {
chrome.tabs.executeScript({
file: 'alert.js'
}); 
}

document.getElementById('clickme').addEventListener('click', hello);

这是我的 alert.js

alert('hello ' + document.location.href);
console.log('Tryhard');

我知道我一定犯了一些错误，但我仍然难以理解如何使事情正常进行...

提前致谢！

Answer 1

有关更保守的解决方案，请参阅

======

它与活动选项卡配合使用，因此您需要在您的清单中为每个可能的 URL 添加权限，您希望它工作 = 所有 URLs："permissions": ["<all_urls>"]。所以您的清单将如下所示：

...
"browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
},
"permissions": ["<all_urls>"],
"options_page": "options.html"

只是补充说它应该可以正常工作。

Answer 2

有效，但未达到最优。

如果您像这样使用活动选项卡，则不需要所有内容的全面许可。声明 <all_urls> 将导致用户在安装时收到可怕的警告。

有一个special permission, "activeTab"，专门用于此目的。当用户调用扩展时（例如，通过按下其按钮），它会授予当前选项卡的权限。

"permissions": ["activeTab"],

无法通过 Chrome 扩展弹出窗口创建 JS 弹出窗口

Cannot create a JS popup via the Chrome Extension popup

javascript

google-chrome

popup

google-chrome-extension