Question

我想在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");
}

Answer 1

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');
});

如何在Google Chrome扩展程序中调用函数

1 个答案: