iT邦幫忙

4

[鐵人賽小工具] iT幫文字編輯器批次上傳圖片 (Chrome 擴充功能)

我做了一個 Chrome 擴充功能,可以讓 IT幫的文字編輯器批次上傳圖片。

程式部分

1. 新增 manifest.json

{
    "name": "iTHelpImageUpload", 
    "description": "iTHelpImageUpload", 
    "version": "1.0", 
    "manifest_version": 2,
    "icons": {
        "16": "16.png", 
        "128": "128.png"
    },
    "content_scripts": [
        {
          "matches": ["https://ithelp.ithome.com.tw/*"],
          "js": ["content.js"]
        }
      ]
}

2. 新增 content.js

(function () {
    //產生批次圖片上傳按鈕
    var toolbars = [];
    function bind() {
        //取得所有的 editor-toolbar
        var toolbarList = document.getElementsByClassName('editor-toolbar');
        for (let i = 0; i < toolbarList.length; i++) {
            let toolbar = toolbarList[i];
            toolbars.push(toolbar);

            //產生 input
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('multiple', 'multiple');
            input.setAttribute('accept', 'image/jpeg,image/png');
            input.setAttribute('style', 'display: none');
            input.onchange = async function () {
                //上傳圖片
                var urls = '';
                var form = toolbar.closest('form');
                var token = form.querySelectorAll('input[name="_token"]')[0].value;
                for (var i = 0; i < this.files.length; i++) {
                    var formData = new FormData();
                    formData.append("images[]", this.files[i]);
                    try {
                        var response = await fetch('https://ithelp.ithome.com.tw/api/upload', {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'X-CSRF-TOKEN': token
                            }
                        });
                        var result = await response.json();
                        if (result.status === 'success')
                            urls += '![' + result.url + '](' + result.url + ')\n';
                        else
                            urls += 'error.' + '\n';
                    }
                    catch (err) {
                        urls += 'error.' + '\n';
                    }
                }
                //擴充功能不能讀取網站程式,沒辦法將網址插入編輯視窗
                prompt("使用 Ctrl+C 複製圖片網址", urls);
            }

            //產生按鈕
            var batchBtn = document.createElement('a');
            batchBtn.setAttribute('title', '批次上傳圖片');
            batchBtn.setAttribute('tabindex', '-1');
            batchBtn.setAttribute('class', 'fa fa-files-o');
            batchBtn.onclick = function () {
                input.click();
            }

            //插入 input 和按鈕
            var target = toolbar.getElementsByClassName('fa-upload')[0];
            toolbar.insertBefore(input, target);
            toolbar.insertBefore(batchBtn, target);
        }
    }
    bind();
})();

3. 最後要準備兩張圖片當 icon

  • 16x16
  • 128x128

https://ithelp.ithome.com.tw/upload/images/20200318/20106865rFU5FQI6PY.jpg


安裝擴充功能

1. 開啟 Chrome 的擴充功能

https://ithelp.ithome.com.tw/upload/images/20200318/20106865czB3ifFvdb.jpg

2. 開啟開發人員模式

https://ithelp.ithome.com.tw/upload/images/20200318/20106865fFIwLxbDzR.jpg

3. 選擇程式資料夾

https://ithelp.ithome.com.tw/upload/images/20200318/20106865nJMtbTKeub.jpg

4. 安裝成功後,可以在 Chrome 右上角看到 icon

https://ithelp.ithome.com.tw/upload/images/20200318/201068657cOYXLnuTh.jpg


結果

1. 原來的上傳前面多了一個批次上傳

https://ithelp.ithome.com.tw/upload/images/20200318/20106865WuWEBu79MV.jpg

2. 點擊後會跳出檔案視窗,可以選擇多張圖片

https://ithelp.ithome.com.tw/upload/images/20200318/20106865itrhXlfqI1.jpg

沒有做進度條,圖片多的話需要等一段時間。

3. 上傳完成後會跳出 prompt 視窗,可以使用 Ctrl+C 複製圖片網址

https://ithelp.ithome.com.tw/upload/images/20200318/20106865uboroBOAM7.jpg

擴充功能不能讀取網站程式,沒辦法將網址插入編輯視窗。(╯‵□′)╯︵┴─┴

4. 最後將網址貼到編輯器上

https://ithelp.ithome.com.tw/upload/images/20200318/20106865fj4gqsQU58.jpg


結語

完整程式我會放在 GitHub 上,歡迎大家取用。
https://github.com/fysh711426/ithelp/tree/master/iTHelpImageUpload

本篇內容為教學用途,如有違規麻煩告知,我會修改或刪除文章。


2 則留言

0
Andy Chiu
iT邦研究生 3 級 ‧ 2020-03-27 12:57:38

/images/emoticon/emoticon12.gif

/images/emoticon/emoticon41.gif

0
Alex
iT邦研究生 5 級 ‧ 2020-04-07 17:28:27

/images/emoticon/emoticon34.gif

/images/emoticon/emoticon41.gif

我要留言

立即登入留言