How to call a function in google chrome extension

Question

I want to call a function from html file in google chrome extension, where can I write the function definition for

manifest.json File is

{
  "name": "Context Menus Sample",
  "description": "Shows some of the features of the Context Menus API",
  "version": "0.6",
  "permissions": ["contextMenus"],

    "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "colorConverter.html"
  },

  "manifest_version": 2
}

colorConverter.html File is

<style>
   .tb10 {
   background: white;
   border-radius: 5px;
   color: #666;
   float: left;
   padding: 5px 10px;
   width: 165px;
   outline: none;
   font-size: -webkit-xxx-large;
   }
</style>
<body>
   <table width="24%">
      <tbody>
         <tr>
            <td><b>Convert/Choose HEX Color Code</b></td>
         </tr>
         <tr>
            <td>Insert <b>RGB Color</b> Value   [e.g: 255 255 255 ]</td>
         </tr>
         <tr>
            <td><font color="red" style="font-weight:" bold;="">R</font>ed </td>
         </tr>
         <tr>
            <td>
               <input value="0" class="tb10" style="box-shadow: 0 0 5px 3px #FF0000;border: 1px solid #FF0000;" id="redn" onclick="ss();" type="text"  maxlength="3">
            </td>
         </tr>
         <tr>
            <td>
               <font color="green" style="font-weight:" bold;="">G</font>reen 
            </td>
         </tr>
         <tr>
            <td>
               <input value="0" class="tb10" style="box-shadow: 0 0 5px 3px #00FF00;    border: 1px solid #00FF00;" onclick="ss(); id="greenn" type="text"  maxlength="3">
            </td>
         </tr>
         <tr>
            <td><font color="blue" style="font-weight:" bold;="">B</font>lue</td>
         </tr>
         <tr>
            <td><input value="0" class="tb10" id="bluen" style="box-shadow: 0 0 5px 3px #0000FF;border: 1px solid #0000FF;" onclick="ss(); type="text"  maxlength="3"></td>
         </tr>
         <tr>
            <td>HEX Equivalent </td>
         </tr>
         <tr>
            <td><input id="hexcolor" type="text" readonly=""></td>
         </tr>
         <tr>
            <td>This is your color</td>
         </tr>
         <tr>
            <td id="dumm" align="center" height="200" style="background-color: rgb(2, 222, 2);">
            </td>
         </tr>
      </tbody>
   </table>
</body>
</html>

where can I define the following function, If I define it on the same page It shows error.

function ss()
{
 alert("execute");
}

Answer 1

Chrome extension will not allow the onclick and inline methods for security purpose so write all functions in the .js file like below

colorcoverter.html

<!DOCTYPE html>
<html>
<head>
  <script src="color.js"></script>
  <script src="jquery.js"></script>  

<style>
.tb10 {
    background: white;
    border-radius: 5px;
    color: #666;
    float: left;
    padding: 5px 10px;
    width: 165px;
    outline: none;
}

</style>


<body>
<table width="24%">
    <tbody>
    <tr><td>Insert <b>RGB Color</b> Value   [e.g: 255 255 255 ]</td></tr>
            <tr><td><font color="red" style="font-weight:" bold;="">R</font>ed </td></tr>
<tr><td>
            <input value="0" class="tb10" style="box-shadow: 0 0 5px 3px #FF0000;border: 1px solid #FF0000;" id="redn" type="text"  maxlength="3"></td> </tr>
<tr><td>
            <font color="green" style="font-weight:" bold;="">G</font>reen </td></tr>
<tr><td>
            <input value="0" class="tb10" style="box-shadow: 0 0 5px 3px #00FF00;   border: 1px solid #00FF00;" id="greenn" type="text"  maxlength="3"></td></tr>

<tr><td><font color="blue" style="font-weight:" bold;="">B</font>lue</td></tr>

    <tr><td><input value="0" class="tb10" id="bluen" style="box-shadow: 0 0 5px 3px #0000FF;border: 1px solid #0000FF;" type="text" maxlength="3"></td></tr>

        <tr><td>HEX Equivalent </td></tr>

        <tr><td><input id="hexcolor" type="text" readonly=""></td></tr>

        <tr><td>This is your color</td></tr>

        <tr><td id="dumm" align="center" height="80px" style="background-color: rgb(2, 222, 2);">

        </td></tr>

        </tbody></table>
</body>
</html>

color.js file:-

document.addEventListener('DOMContentLoaded', function () {      
  $("#redn").on("keydown", function(){
    change(this,'r');
});


$("#greenn").on("keydown", function(){
    change(this,'g');
});

  $("#bluen").on("keydown", function(){
    change(this,'b');
});

How to call a function in google chrome extension

Question

1 answers

solution1
1

How to call a function in google chrome extension

Question

1 answers

solution1 1

solution1
1