Question

我向初学者表示歉意，但是我想在chrome扩展程序中实现一个按钮，该按钮运行我创建的javascript函数。

清单文件：

"manifest_version": 2,
"name": "Taylor's Test App",
"description": "This is a test app that will be changed.",
"version": "1.0.0",
"content_security_policy":"script-src 'self' https://apis.google.com; 
object-src 'self'",
"icons": {"128": "supreme_logo.png"},
"browser_action":{
    "default_icon": "supreme_logo.png",
    "default_popup": "popup.html"
},
"permissions": ["identity", "https://accounts.google.com/*",  
"https://www.googleapis.com/*"]

HTML文件：

<div class="modal-content">
    <p>Supreme Bot</p>
</div>
<div>


        <button type="button" id="supremebot">supremebot</button>
        <script src="supremebot.js"></script>



</div>

JavaScript文件：

function supremeBot() 
{
var full_name = "Taylor Allen";
var email = "taylorallen0913@gmail.com";
var tel = "9258958479";
var address = "6152 kearny way";
var zip = "94582";
var city = "San Ramon";
var state = "CA";
var country = "USA";
var ccn = "1111 1111 1111 1111";
var ccm = "04";
var ccy = "2021";

// Name
document.getElementById("order_billing_name").value= full_name;
// Email
document.getElementById("order_email").value= email;
// Phone #
document.getElementById("order_tel").value= tel;
// Address
document.getElementById("bo").value= address;
// Zip Code
document.getElementById("order_billing_zip").value= zip;
// City
document.getElementById("order_billing_city").value= city;
// State
document.getElementById("order_billing_state").value= state;
// Country
document.getElementById("order_billing_country").value= country;
// Credit Card Num
document.getElementById("nnaerb").value= ccn;
// Credit Card Month
document.getElementById("credit_card_month").value= ccm;
// Credit Card Year
document.getElementById("credit_card_year").value= ccy;

}

我以前尝试过运行它，但它给了我2条错误：

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“ script-src'self'blob：文件系统：chrome-extension-resource：”。要启用内联执行，需要使用'unsafe-inline'关键字，哈希（'sha256-95d8ph3GMGLjQcmKAitVhdvK6nQO58NNeLACLnFWhyQ ='）或随机数（'nonce -...'）

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：“ script-src'self'blob：文件系统：chrome-extension-resource：”。要启用内联执行，需要使用'unsafe-inline'关键字，哈希（'sha256 -...'）或随机数（'nonce -...'）。

Answer 1

您似乎需要在设置中添加更多内容。以下是我对您的扩展程序的看法：

首先，您要在弹出窗口中单击一个按钮。您的manifest.json文件看起来像是设置为通过popup.html文件显示带有按钮的弹出窗口（我假设您是使用按钮存储HTML代码的地方，对吗？），因此没有更改需要在那里。

下一步，您希望按钮调用一些将与您正在查看的页面上的html进行交互的javascript。为此，您实际上必须使弹出窗口与Content Script进行交互。这是您必须进行的一些更改：

在您的manifest.json文件中，插入内容脚本declaratively，如下所示：
- "content_scripts": [{ "matches": ["http://*.YOUR-URL.com/*"], "js": ["PATH/YOUR-JS-FILE.js"] }],
- 您必须更改YOUR-URL.com部分以匹配您要在其上运行内容脚本的URL。如果需要，它甚至可以与localhost:3000一起使用。
- 您还必须将PATH/YOUR-JS-FILE.js更改为存储内容脚本文件的确切位置
- 您可能应该阅读我上面链接的文档，以找到所有可用的选项;）
在popup.html文件中，添加带有某些代码的本地<script>...</script>标记，使您能够在弹出窗口和内容脚本之间进行通信。这称为Message Passing。
- 从文档中可以看到，“从扩展名[弹出窗口]向内容脚本发送请求看起来... [像这样] ...您需要指定向哪个标签发送[消息/请求]到。此示例演示了如何向所选选项卡中的内容脚本发送消息”
  - chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) { console.log(response.farewell); }); });
  - 基本上，这就是您在Popup的<script>标记中所需要的。在脚本标记内创建一个函数，一旦单击弹出窗口中的按钮，该函数将被调用。此功能应包含与上面相似的代码，它将向Chrome当前选中/打开的标签上运行的所有内容脚本发送一条消息。
在新的内容脚本javascript文件中，创建一个消息侦听器，当将chrome扩展消息发送到该页面时，该消息侦听器将（异步）运行。
- 现在您已经可以将消息从弹出窗口发送到内容脚本（步骤2），您必须在内容脚本中添加消息“侦听器”以对消息做出反应。再次查看Message Passing文档。
  - chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension"); if (request.greeting == "hello") sendResponse({farewell: "goodbye"}); });
  - 当任何消息发送到该特定选项卡时，此chrome.runtime.onMessage.addListener(...函数将在内容脚本中运行。
  - 注意：如果您回顾消息发送功能（greeting，则会在消息中发送request对象的...sendMessage(..., {greeting: "hello"}...属性。显然不必使用相同的属性名称，甚至不必检查特定的值，当您有多个来自不同触发器的消息传递时，此检查非常有用。可以验证消息的来源，因此您可以根据特定的消息/触发器确切地决定要做什么。
  - 现在，您可以调用自己的函数sendResponse({...，而不是运行supremeBot()（在检查message属性之后），该函数现在应该可以访问您要查找的所有DOM元素。

这有点像chrome扩展开发的速成课程教程-希望对您有所帮助！

Answer 2

function supremebot(){
alert("Hii")
}
document.addEventListener('DOMContentLoaded', function() {
var supremebot = document.getElementById('supremebot');
  
supremebot.addEventListener('click', function() {
    supremebot()
});
});

 <button id='supremebot' >Click me</button>

Answer 3

您可以这样做，

function supremebot(){
alert("Hii")
}

$("#supremebot").on('click', function() {
var value=$("#input1").val();
alert(value);
    supremebot();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=text id="input1">
<button id='supremebot' >Click me</button>

Answer 4

您可以在HTML代码中添加onclick属性。它将从您的JS文件中调用该函数。

<button type="button" id="supremebot" onclick="supremeBot">supremebot</button>

如何创建运行我的javascript函数的按钮？

4 个答案: