一起來做Chrome Extension《搭個架子》

CEF - A simple Chrome Extension development falsework

CEF是一個簡單的Chrome Extension開發腳手架，它有如下功能：

1. 模塊化的結構，便於開發維護
2. 支持模板
3. 支持簡單的數據綁定
4. 發布工具，可對JS文件進行壓縮，並輸出干凈的擴展文件

目錄

• 1. 獲取並初始化
• 2. 項目結構
• 3. 使用
  • 3.1 創建Module
  • 3.2 創建View
    • 3.2.1 getView()
    • 3.2.2 display()和append()
    • 3.2.3 模板語法
  • 3.3 創建Event
  • 3.4 發布
    • 3.4.1 設置過濾
  • 3.5 加載文件

1.獲取並初始化

1. git clone https://github.com/yuiitsu/CEF.git
2. cd CES
3. npm install

2.項目結構

- dist // 發布文件夾
- scripts
  - lib // 庫文件夾
    jquery.js
  - module // 模塊
    - your module
        event.js // 事件監聽
        module.js // 模塊功能
        view.js // 模板
  app.js
  model.js
  run.js
- style
deploy.js // 發布腳本
manifest.json

注：本項目默認使用jQuery作為dom selector

3.使用

3.1創建Module

在module文件夾里創建Module文件夾，如：demo。接着在demo文件夾里創建module.js，event.js和view.js，

注：這3個文件並不是必須的，根據情況添加。比如，該模塊並不需要模板，所以view.js就可以不要

在module.js中添加如下代碼：

App.module.extend('demo', function() {
    //
    this.init = function() {
        // todo.
    };
});

extend的第一個參數為模塊名，如果加載了該模塊，可以在module, event, view里直接使用this.module.demo調用。
init方法為初始化方法，模塊加載的時候即會執行。

接着添加一個方法：

App.module.extend('demo', function() {
    //
    this.init = function() {
        // todo.
    };
    
    this.hello = function() {
        console.log('Module demo hello.');
    };
});

如下調用hello方法：

this.module.demo.hello();

3.2創建View

在demo文件夾下的view.js里添加如下代碼：

App.view.extend('demo', function() {
    this.hello = function() {
        return `
            <div class="ces-view-example">
                <h1>CES View Example</h1>
                <div>Hi, {{ data['name'] }}</div>
            </div>
        `;
    };
});

同Module，extend第一個參數為view名稱，hello方法返回一段html模板代碼。view對象有3個方法，分別是：

• getView()
• display()
• append()

3.2.1getView()

function getView(name, method, data) {}

它有3個參數：

• name，view名稱
• method, 方法名稱
• data, 渲染數據

調用demo的hello方法：

let html = this.view.getView('demo', 'hello', {name: 'CEF'});

將會得到：

<div class="ces-view-example">
    <h1>CES View Example</h1>
    <div>Hi, CEF</div>
</div>

3.2.2display()和append()

這兩個方法很明顯，輸出HTML到指定位置用的，參數相同

function display(name, method, data, target) {}

它們有4個參數，前3個同getView，最后的target即為目錄對象，因為本項目使用了jQuery，所以這里是jQuery對象
調用：

this.view.display('demo', 'hello', {name: 'CEF'}, $('#xxx'));

3.2.3模板語法

// 變量附值
{{ var v = 1; }}

// 變量輸出
{{ v }}

// 條件
{{ if v === 1 }}
// todo.
{{ else }}
// todo.
{{ end }}

// 循環
{{ var list = [1, 2] }}
{{ for var i in list }}
    {{ list[i] }}
{{ end }}

// 調用其它模板
{{ var v = this.view.getView(); }}

// 渲染模板
{{ v }}

3.3創建Event

在demo文件夾的event.js里添加如下代碼：

App.event.extend('demo', function() {
    this.event = {
        listenExample: function() {
            // listen event
        }
    }
});

和之前一樣，只是event只有一個默認的對象，this.event，當event.js被加載的時候，系統會自動執行this.event里的所有方法，不需要再手動執行監聽了。
在event.js里同樣可以使用this.module和this.view來調用module或view，但建議只調用module，渲染的工作交到它。

3.4發布

發布腳本可以去除項目目錄下不需要的文件夾和文件，將對js文件進行壓縮混淆。命令如下：

node deploy.js

3.4.1設置過濾

不需要發布的文件夾或文件，不需要壓縮混淆的文件可以在deploy.js里配置

let excludes = {
    'copy': [
        '.gitignore',
        '.DS_Store',
        'builder.js',
        'package.json',
        'package-lock.json',
        'README.md',
        '.git',
        '.idea',
        'node_modules',
        'dist'
    ],
    'mini': [
    ]
};

其中excludes.copy為不需要發布的文件夾和文件，mini為不需要壓縮混淆的文件

發布執行完成后，文件輸出到dist文件夾，只需要將dist目錄打包，上傳Chrome Extension Store即可。

3.5加載文件

目前新增Module里的文件需要手動添加到manifest.json或是html文件里，后續會增加編譯自動執行。因為考慮到可能的因素過多，
配置的代理可能會非常多，所以手動添加是目前比較好的處理方式。