65.9K
CodeProject 正在变化。 阅读更多。
Home

如何：使用外部 JavaScript 方法创建和测试 Chrome 扩展

Parveen Siwach
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.80/5 (3投票s)

2016年8月5日

CPOL

3分钟阅读

viewsIcon

17008

downloadIcon

140

创建一个调用某些 JavaScript 方法的 Chrome 扩展

引言

本文将介绍如何在单击按钮时从 Chrome 插件/扩展调用 JavaScript 方法。

背景

要创建 Chrome 扩展/插件，您必须了解 JavaScript、CSS 和 HTML。

Using the Code

众所周知，Chrome 浏览器具有很强的可扩展性。它支持创建插件/扩展。似乎我们能想到的任何事情都有 Chrome 插件。

开发自己的插件/扩展非常容易。

什么是 Chrome 扩展？

Chrome 扩展是 HTML、CSS 和 JavaScript 的组合，它允许您通过 Chrome 公开的一些 JavaScript API 向 Chrome 添加一些功能。

扩展基本上只是一个托管在 Chrome 中的网页，可以访问一些额外的 API。

如何创建和测试 Chrome 扩展

要创建 chrome 扩展，我们需要一些必需的文件

  1. manifest.json
  2. icon.png
  3. popup.html (任何 HTML 文件)
  4. popup.js (包含在 HTML 页面中用于 JavaScript 方法的任何 js 文件)
  5. background.js (用于调试)

manifest.json

每个 Chrome 扩展都需要一个 manifest 文件。 Manifest 文件告诉 Chrome 正确加载 Chrome 中的扩展所需的一切。因此，我们将创建一个manifest.json文件并将其放入一个新创建的文件夹中，例如External JS Method。

{
   "manifest_version": 2, 
   "name": "Exteranal JS plug in", 
   "description": "This is sample chrome extension to test Exteranal JS", 
   "version": "1.0", 
   "background": {"scripts":["background.js"]}, 
   "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 
    "permissions": [ 
     "activeTab", 
     "webRequest", 
     "webRequestBlocking" 
    ] 
}

icon.png

对于每个扩展，我们需要一个尺寸为19 x 19 px 的 PNG 文件图标。

popup.html

在此文件中，我们设计扩展的 UI。当用户从浏览器单击扩展图标时，将显示此 UI。例如，我们创建了一个标签 - 获取数据 和按钮“提交”。

我们需要的是单击提交按钮时，将使用alert调用 JavaScript 方法。

 <!doctype html> 
 <html> 
 <head>
    <title>
      Getting Started with Exteranal JS in Chrome Extension
 </title>
    <script src="popup.js">    </script>
  </head>
  <body>
    <label>
        Get Data <input type="submit" name="mySubmitButton" 
        id="mySubmitButton" value="Submit" />
    </label>
  </body>
</html>

为了加载此文件，我们在manifest.json中引用了此popup.html文件，并且我们在popup.html文件中引用了popup.js文件。

注意：Chrome 扩展不允许您使用内联 JavaScript。因此，我们在popup.html文件中引用了popup.js文件，而不是内联 js。

 

此外，我们还为“提交”按钮“mySubmitButton”分配了一个 ID，并使用addEventListener来绑定事件。所有与绑定和调用相关的代码都将在popup.js中。

popup.js

在此文件中，将编写所有与插件相关的绑定内容和业务逻辑。

 document.addEventListener('DOMContentLoaded', function() { 
     var mySubmitButton = document.getElementById('mySubmitButton'); 
     // onClick's logic below: 
     mySubmitButton.addEventListener('click', function() { 
         gethistoryct(); 
     }); 
 }); 

 function gethistoryct() 
 { 
     alert('function verified'); 
 }

注意：所有这些文件必须在同一个文件夹中。

就这样。我们已经完成了编码部分。现在我们需要测试这个插件。

测试 Chrome 扩展/插件

要测试扩展

  1. 打开 Chrome 浏览器，在地址栏中输入chrome://extensions，并启用“开发者模式”。这将显示“加载已解压的扩展程序”按钮，以加载/测试我们新创建的扩展程序。

  2. 加载已解压的扩展程序

  3. 现在，您的扩展程序将显示在 Chrome 工具栏中。当用户单击扩展程序图标时，UI 从我们的 html 中呈现。用户单击 html UI 中的按钮

我们已成功测试了从 Chrome 扩展调用 JS 方法。

希望这能帮助您了解 Chrome 扩展。

感谢您的阅读。

© . All rights reserved.