如何创建 chrome 扩展答案

【问题标题】：How to create chome extension如何创建 chrome 扩展
【发布时间】：2016-06-12 02:37:24
【问题描述】：

如何创建 chrome 扩展？段落只是一个或多个连续的文本行，由一个或多个空行分隔。（空行是任何看起来像空行的行——只包含空格或制表符的行被视为空白。）普通段落不应使用空格或制表符缩进。

【问题讨论】：

标签： google-chrome google-chrome-extension

【解决方案1】：

步骤：

创建应用程序文件夹例如：d:\apps_folder\app_01

在上面的 app_01 文件夹中创建 manifest.json 文件

  file content like this

{   
    "manifest_version": 2,
    "name":"Give_Your_Extension",
    "description":"Give description about the Extension",
    "short_name":"Shot_Name_for_Extension",  
    "version": "0.1",
    "browser_action": {
                       "default_popup": "Home.html",
                       "default_icon" : "images/logo.png"
                      },   "permissions": [ ],
   "content_security_policy": "script-src 'self' 'unsafe-eval';
                               object-src  'self'"

}

创建 Home.html 放置您想要的内容例如：

// main.min.js


var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

  $scope.tabs = [{}]
  $scope.winID = "";
  $scope.td = new Date();

  $scope.ping = function() {

    } // end ping method code
});

<!DOCTYPE html>
<html>
<style type="text/css">
  th {
    background-color: Green;
    color: #FFFFFF;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- <script src="js/angular.min.js"></script> -->
<script src="js/main.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    Window ID: {{winID}}

    <hr>

    <button ng-click="ping()">ping</button>
    <br>Length:{{tabs.length}}
    <br>

    <table border='1'>
      <tr>
        <th>DATE</th>
        <th>WINDOW_ID</th>
        <th>TAB_ID</th>
        <th>TAB_INDEX</th>
        <th>TAB_URL</th>
      </tr>
      <tr ng-repeat="x in tabs">
        <td>{{td|date:"yyyy/MM/dd '_' hh:mm:ss a"}}</td>
        <td>{{winID}}</td>
        <td>{{x.id}}</td>
        <td>{{x.index}}</td>
        <td>{{x.url}}</td>
      </tr>
    </table>

  </div>


</body>

</html>

在 app_01\images 中创建 images 文件夹，并放入 logo png

【讨论】：