Chrome瀏覽器插件開發－關於案例

時間 2019-12-05

標籤 chrome 瀏覽器插件開發關於案例欄目 Chrome 简体版

原文原文鏈接

前言
關於案例
下一章版本更新提示案例

1、前言

　　上章咱們提到過開發一個插件所須要的步驟：html

　　　　Chrome瀏覽器插件開發－淘寶自動登陸
jquery

　　而且還介紹瞭如何在頁面上面注入腳本代碼，而且成功的完成用戶名和密碼的自動輸入功能。chrome

　　本章將會以一些案例來介紹插件的一些新的開發技巧。案例將包括：json

　　　　關於案例api

　　涉及的技術點包括：瀏覽器

　　　　如何使用popup.html安全

　　　　popup如何使用jsapp

　　　　如何使用chrome api工具

2、關於案例

任何一個成熟的產品都會有關於的標誌，這是在法律的角度上面宣示本身擁有這個產品的全部權。google

如下案例將會介紹如何作個「關於」的案例，咱們經過觀察其它軟件的「關於」都有相同的特性。

　　　　　　產品名稱

　　　　　　產品版本號

　　　　　　產品編號／許可證／做者

　　　　　　產品法律效益宣示

　本次案例將會介紹如何經過彈窗來實現本功能，具體運行界面圖以下：

　　由界面運行圖可得知，咱們須要製做一個彈窗界面popup.html。

　　chrome插件製做彈窗很是簡單，咱們只需在manifest.json中配置browser_action項便可達到彈窗界面的功能。

"browser_action": {
    "default_icon": "1.png",
    "default_popup":"popup.html"
  }

　　browser_action

　　在瀏覽器主工具條的地址欄右側增長一個圖標

　　　　default_icon: 圖標資源文件路徑

　　　　default_popup: 點擊彈窗界面資源文件路徑

編寫popup.html, 加入：

簡單方便的完成了任務。

顯然咱們的任務並沒這麼簡單，咱們須要動態讀取本插件產品的信息。

如何獲取本插件產品的信息，咱們須要經過Chrome API來獲取：

chrome.app.getDetails()
//獲取產品信息，包括manifest.json全部項.

下面圖是經過backgroup獲取產品信息的案例圖，供參考：

popup.html如何使用js呢？

因爲google的安全機制，該處將會出現安全錯誤提示（html裏面不能出現內聯js腳本）：

正確的用法是新建一個js文件，popup.html代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.0.0.min.js"></script>
    <script src="popup.js"></script>
</head>
<body>
<div style="width: 200px;text-align: center" id="about-box">

</div>

</body>
</html>

popup.js文件

$(document).ready(function(){
    var details = chrome.app.getDetails();

    var html = "<p><img src='"+details.browser_action.default_icon+"'></p>"+
            "<h2>"+details.name+"</h2>"+
            "<p>版本:v"+details.version+"</p>"+
            "<p>做者:oshine</p>"+
            "<p>@copyright 2016, 不可用於商業用途</p>";
    $("#about-box").html(html);
});

manifest.json

{
  "manifest_version": 2,
  "version": "1.0.2",
  "name": "淘寶自動登陸助手",
  "description": "淘寶自動登陸助手",
  "browser_action": {
    "default_icon": "1.png",
    "default_popup":"popup.html"
  },
  "permissions": [
    "https://login.taobao.com/*"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["https://login.taobao.com/*"],
      "js": ["taobao_login.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
}