iconfont 批量添加購物車 及自開發chrome插件

起因

iconfont非常好用，但是如果要批量的添加icon到自己的購物車簡直就是噩夢，一個一個點擊太扯蛋，只有自己想辦法了。

思路

打開列表詳情頁，例如隨便一個包, 右鍵-> 開發者工具 -> console 運行如下代碼,選取所有icon下的購物車按鈕，觸發點擊。

document.querySelectorAll('.icon-gouwuche1').forEach(item=>item.click());

這里iconfont網站有個bug，超過一定數量（MACPRO chrome 400+）的icon添加到購物車后，點擊下載就會報錯。所以建議還是夠用就好，沒有必要選那種太多的包。 因為一次性出發了好多click的事件，而且是異步非阻塞並行觸發，有可能會造成瀏覽器短暫的無響應，不用擔心，最多一分鍾就恢復。

轉化成chrome插件

插件地址： https://github.com/jingyinggong/iconFontCollector 

給小白准備，也是自己簡化操作和學習chrome插件的開發

本插件就做了一個事情，只在https://www.iconfont.cn/collections/detail?* 網站模式下生效。在中部的主要功能區按鈕區添加一個批量添加按鈕

github上傳的圖片顯示不出來，只能用blog上傳的圖片進行引用了。

添加前：

添加后：

給全選按鈕添加click相應事件，同上console內容。

技術實現

 

manifest.json

{
  "name": "iconFontBatchCollector",
  ....
  "content_scripts": [{
    "matches": ["https://www.iconfont.cn/collections/detail*", "https://www.iconfont.cn/collections/detail*"],
    "js": ["scripts/collect.js"],
    "run_at": "document_end"
  }]
}

matches 實現了特定域名+路徑下生效的限制

js 是表示真實要運行js引用。

run_at 頁面加載完再運行。

collect.js

(function(){
  var timeout = null;
  function init() {
    var bar = document.querySelector(".block-bar-right .block-radius-btn-group");
    if(!bar) {
      tryToDetect();
      return;
    } else {
      clearTimeout(timeout);
    }

    var btn = document.createElement('span');
    btn.className = 'radius-btn radius-btn-like';
    btn.title = "全選";
    btn.style.backgroundColor="mediumpurple";
    btn.innerHTML = `<svg class="icon" style="width: 0.6em; height: 0.6em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35710"><path d="M102.4 302.08c5.12 5.12 15.36 10.24 25.6 10.24s15.36-5.12 25.6-10.24l174.08-174.08c5.12-5.12 10.24-15.36 10.24-25.6s-5.12-15.36-10.24-25.6c-20.48-5.12-40.96-5.12-51.2 10.24l-148.48 153.6-71.68-76.8C51.2 158.72 40.96 158.72 35.84 158.72c-10.24 0-15.36 5.12-25.6 10.24-5.12 5.12-10.24 10.24-10.24 20.48s5.12 15.36 10.24 25.6L102.4 302.08zM276.48 409.6l-148.48 153.6-71.68-71.68C51.2 486.4 40.96 481.28 35.84 481.28c-10.24 0-15.36 5.12-25.6 10.24-5.12 10.24-10.24 15.36-10.24 25.6s5.12 15.36 10.24 25.6L102.4 629.76c5.12 5.12 15.36 10.24 25.6 10.24s15.36-5.12 25.6-10.24L322.56 460.8c5.12-5.12 10.24-15.36 10.24-25.6s-5.12-15.36-10.24-25.6c-10.24-10.24-30.72-10.24-46.08 0z m0 327.68l-148.48 153.6L56.32 819.2c-5.12-5.12-15.36-10.24-25.6-10.24s-15.36 5.12-25.6 10.24c0 5.12-5.12 15.36-5.12 25.6s5.12 15.36 10.24 25.6L102.4 957.44c5.12 5.12 15.36 10.24 25.6 10.24h5.12c10.24 0 15.36-5.12 25.6-10.24l174.08-174.08c5.12-5.12 10.24-15.36 10.24-25.6s-5.12-15.36-10.24-25.6c-25.6-5.12-40.96-5.12-56.32 5.12zM1024 153.6c0 30.72-25.6 56.32-56.32 56.32h-460.8c-30.72 0-61.44-25.6-61.44-56.32 0-30.72 25.6-56.32 56.32-56.32h455.68c35.84-5.12 66.56 20.48 66.56 56.32z m0 358.4c0 30.72-25.6 56.32-56.32 56.32h-460.8c-30.72 0-56.32-25.6-56.32-56.32s25.6-56.32 56.32-56.32h455.68c35.84 0 61.44 25.6 61.44 56.32z m-5.12 358.4c0 30.72-25.6 56.32-56.32 56.32h-460.8c-30.72 0-56.32-25.6-56.32-56.32 0-30.72 25.6-56.32 56.32-56.32h455.68c35.84 0 61.44 25.6 61.44 56.32z m0 0" fill="#ffffff" p-id="LoganGongPlugin"></path></svg>`;
    btn.addEventListener('click', function(){
      document.querySelectorAll('.icon-gouwuche1').forEach(item=>item.click());
    }, false);

    bar.appendChild(btn);
  }
  function tryToDetect() {
    timeout = setTimeout(init, 1000);
  }

  tryToDetect();

})();

基本思路：

1. 閉包保持變量不會和頁面變量沖突。

2. timeout 遞歸調用檢查頁面按鈕元素是否加載完，因為那塊內容是異步加載的，所以只能不斷檢測。

3. 動態添加一個按鈕到功能按鈕區。

4. 為全選按鈕添加全選邏輯。