Как мне создать кнопку, которая запускает мою функцию JavaScript?

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: filesystem: chrome-extension-resource:". Либо ключевое слово unsafe-inline, хеш ('sha256-95d8ph3GMGLjQcmKAitVhdvK6nQO58NNeLACLnFWhyQ ='), либо одноразовый номер ('nonce -...') требуется для включения встроенного выполнения

Отказался выполнять встроенный обработчик событий, поскольку он нарушает следующую директиву политики безопасности содержимого: «script-src 'self' blob: filesystem: chrome-extension-resource:". Для включения встроенного выполнения требуется ключевое слово unsafe-inline, хеш (sha256 -...) или одноразовый номер (nonce -... ').

Answer 1

Вы можете добавить атрибут onclick в свой HTML-код. Он вызовет функцию из вашего файла JS.

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

Answer 2

Похоже, вам нужно добавить еще несколько штук к вашей настройке. Вот как я думаю о вашем расширении:

Сначала , вы хотите нажать кнопку во всплывающем окне. Ваш файл manifest.json выглядит так, как будто он настроен на отображение всплывающего окна с кнопкой через файл popup.html (я полагаю, именно здесь вы храните свой HTML-код с помощью кнопки, верно?), Поэтому никаких изменений там не требуется.

Далее , вы хотите, чтобы ваша кнопка вызывала некоторый javascript, который будет взаимодействовать с html на странице, которую вы просматриваете. Для этого вам нужно, чтобы ваше всплывающее окно взаимодействовало с Content Script . Вот некоторые изменения, которые вы должны будете сделать:

1. В вашем файле manifest.json введите контентный скрипт декларативно , вот так:
   • "content_scripts": [{ "matches": ["http://*.YOUR-URL.com/*"], "js": ["PATH/YOUR-JS-FILE.js"] }],
   • Вам нужно изменить часть YOUR-URL.com, чтобы она соответствовала URL, на котором вы хотите запустить скрипт контента. Он должен даже работать с localhost:3000, если хотите.
   • Вам также придется изменить PATH/YOUR-JS-FILE.js точно на то место, где вы храните файл скрипта контента
   • Вам, вероятно, следует прочитать документы, на которые я ссылался выше, чтобы узнать все доступные варианты;)
2. В вашем файле popup.html добавьте локальный тег <script>...</script> с некоторым кодом, который позволит вам взаимодействовать между всплывающим окном и скриптом содержимого. Это называется Передача сообщений .
   • Как видно из документов: «Отправка запроса из расширения [всплывающего окна] в скрипт содержимого выглядит ... [примерно так] ... вам нужно указать, на какую вкладку его отправлять [сообщение / запрос] Т. к. в этом примере демонстрируется отправка сообщения скрипту содержимого в выбранной вкладке
     • chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) { console.log(response.farewell); }); });
     • Это в основном то, что вам нужно в теге <script> вашего Popup. Создайте внутри тега скрипта функцию, которая будет вызываться после нажатия кнопки во всплывающем окне. Эта функция должна содержать код, аналогичный описанному выше, который будет отправлять сообщение любым сценариям содержимого, запущенным на текущей выбранной / открытой вкладке в Chrome.
3. В вашем новом файле javascript сценария содержимого создайте прослушиватель сообщений, который будет работать (асинхронно), когда на эту страницу будет отправлено сообщение с расширением chrome.
   • Теперь, когда у вас есть способ отправить сообщение из вашего всплывающего окна в ваш контент-скрипт (шаг # 2), вы должны добавить сообщение 'listener' внутри вашего контентного скрипта, чтобы отреагировать на сообщение. Опять же, посмотрите на 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(), которая теперь должна иметь доступ ко всем элементам DOM, которые вы ищете.

Это было своего рода обучающее руководство по разработке расширений Chrome - надеюсь, оно поможет!

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

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

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