如何在googlechrome扩展中调用函数

How to call a function in google chrome extension

本文关键字：调用 函数 扩展 googlechrome      更新时间：2023-09-26

我想从google chrome扩展中的html文件中调用一个函数，在哪里可以为编写函数定义

manifest.json文件是

{
  "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文件是

<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>

我在哪里可以定义以下函数，如果我在同一页上定义它，它会显示错误。

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

Chrome扩展将不允许onclick和inline方法用于安全目的因此，在.js文件中编写所有函数，如下面的

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文件：-

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');
});
相关文章：