logo标签列表

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

javascriptgoogle-chromegoogle-chrome-extensionpopup
4
我是一个有用的助手，可以为您翻译文本。

我正在尝试创建我的第一个Chrome扩展程序，但我遇到了使我的JS正常工作的问题。我想做的就是，当我点击“激活”时，它会弹出一个显示“你好”的窗口。

这是我在GitHub上找到并尝试适应于我的代码的代码。当我检查我的扩展程序时，我得到了以下错误：

Unchecked runtime.lastError while running tabs.executeScript: Cannot access contents of url "http://stackoverflow.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');

我知道我肯定犯了一些错误，但我仍然不知道如何使事情正常运作...

提前感谢您！

2个回答
4

武士的回答是正确的，但不够优化。

如果您正在处理当前选项卡，则不需要为所有内容获取权限。声明<all_urls>会导致用户在安装时看到可怕的警告。

有一个特殊权限"activeTab"，专门用于此目的。当用户调用扩展程序（例如按下其按钮）时，它授予当前选项卡的权限。

"permissions": ["activeTab"],
2

如需更为保守的解决方案，请参见Xan的答案

======

该解决方案适用于活动标签页，因此您需要在清单中添加权限以使其对每个可能的 URL 生效 = 所有 URL: "permissions": ["<all_urls>"]。因此，您的清单应如下所示：

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

仅仅添加一点，它应该可以很好地工作。

2
如果您不知道这个，可以看看我的答案，其中提供了一个更为保守的解决方案。 - Xan
谢谢，不确定我是否做对了 :) - Samurai
我真是喜欢这个社区，现在它运行得非常顺利！ - Jaeger
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接