1

I appologize in advance for being a beginner, but I want to implement a button in my chrome extension that runs a javascript function that I have created.

Manifest file:

"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 File:

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


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



</div>

Javascript file:

function supremeBot() 
{
var ";
var email = "";
var tel = "";
var address = "";
var zip = "";
var city = "";
var state = "";
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;

}

I have tried to run this before and it has given me 2 errors:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-95d8ph3GMGLjQcmKAitVhdvK6nQO58NNeLACLnFWhyQ='), or a nonce ('nonce-...') is required to enable inline execution

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

Improve this question
1
  • 2
    You are referencing a lot of HTML elements in your JS code that don't exist in your HTML. Commented Jan 5, 2019 at 7:27

4 Answers 4

Reset to default
3

It looks like you're going to need to add a few more pieces to your setup. Here's a flow of how I'd think about your extension:

First, you want to click a button in a popup. Your manifest.json file looks like it's setup to display a popup with a button, via the popup.html file (I assume that's where you're storing your HTML code with the button, right?) so no changes are needed there.

Next, you want your button to call some javascript that will interact with html on the page you're looking at. To do this, you actually have to have your popup interact with a Content Script. Here are some changes you'll have to make:

  1. In your manifest.json file, inject a content script declaratively, like so:
    • "content_scripts": [{ "matches": ["http://*.YOUR-URL.com/*"], "js": ["PATH/YOUR-JS-FILE.js"] }],
    • You'll have to change the YOUR-URL.com part to match URL you want your content script to run on. It should even work with localhost:3000 if you want.
    • You'll also have to change PATH/YOUR-JS-FILE.js to exactly where you're storing your content-script file
    • You should probably read the docs I've linked to above to find out all of the options available ;)
  2. In your popup.html file, add a local <script>...</script> tag with some code that will enable you to communicate between the Popup and the Content Script. This is called Message Passing.
    • As seen in the docs, "Sending a request from the extension [the Popup] to a content script looks ... [like this]... you need to specify which tab to send it [the message / request] to. This example demonstrates sending a message to the content script in the selected tab"
      • chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) { console.log(response.farewell); }); });
      • This is basically what you'll need in your Popup's <script> tag. Create a function inside the script tag that will be called once you click the button in the popup. This function should hold code similar to what's above, which will send a message to any content scripts running on the current selected / open tab in Chrome.
  3. In your new content script javascript file, create a message listener, which will run (asynchronously) when a chrome extension message is sent to that page.
    • Now that you have a way to send a message from your popup to your content script (step #2), you have to add a message 'listener' inside your content script to react to the message. Again, look at the Message Passing docs.
      • 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"}); });
      • This chrome.runtime.onMessage.addListener(... function will run in the content script when any message is sent to that specific tab.
      • Note: the greeting property on the request object was sent in the message, if you look back at the message sending function (...sendMessage(..., {greeting: "hello"}.... You obviously don't have to use the same property name or anything, you don't even have to have a check for a specific value. This check is super useful when you have multiple messages being passed around from different triggers. It's one way you can verify where the message came from so you can decide exactly what to do based on a specific message / trigger.
      • Now, instead of running sendResponse({... (after checking the message property), you can call your own function supremeBot(), which should now have access to all of the DOM elements you're looking for.

This was kinda a crash course tutorial on chrome extension development - hope it helps!

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0 

function supremebot(){
alert("Hii")
}
document.addEventListener('DOMContentLoaded', function() {
var supremebot = document.getElementById('supremebot');
  
supremebot.addEventListener('click', function() {
    supremebot()
});
});
 <button id='supremebot' >Click me</button>

Improve this answer

2 Comments

Just clarifying, where would i put the calling of the function?
<button type="button" id="supremebot">supremebot</button> just replace this in your code. <button onclick="supremebot()">Click me</button>
0

You can do something like this,

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>

Improve this answer

Comments

0

You can add the onclick attribute in your HTML code. It will call the function from your JS file.

<button type="button" id="supremebot" onclick="supremeBot">supremebot</button>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.