chrome拡張機能に移行

gpioblink commented 4 years ago

DBの5MB制限とかで移行したい

gpioblink commented 4 years ago

まずはよさげなchrome extension探さなきゃ

gpioblink commented 4 years ago

有名そうなextensionマネしながらとか思ってたけど、コード見た感じ普通にbuild.sh的なものでターゲット手動で変える感じで、manifest.jsonとかも適当に手動で用意しちゃってよさそう

gpioblink commented 4 years ago

https://itnext.io/create-chrome-extension-with-reactjs-using-inject-page-strategy-137650de1f39

gpioblink commented 4 years ago

chrome.browserAction.onClicked.addListenerで開けばよさそう

gpioblink commented 4 years ago

LINEのコードでは

main.js

chrome.browserAction.onClicked.addListener(function() {
  var e = {
      left: screen.availLeft + screen.availWidth / 2 - 367.5,
      top: screen.availTop + screen.availHeight / 2 - 290
    },
    o = chrome.runtime.getURL("index.html");
  chrome.tabs.query({
    url: o
  }, function(n) {
    n.length > 0 ? chrome.windows.update(n[0].windowId, {
      focused: !0
    }, function() {
      chrome.tabs.update(n[0].id, {
        active: !0
      })
    }) : chrome.windows.create({
      url: o + "#popout",
      focused: !0,
      left: Math.floor(e.left),
      top: Math.floor(e.top),
      width: 735,
      height: 580,
      type: "panel"
    }, function(e) {
      chrome.windows.onRemoved.addListener(function(o) {
        e.id == o && (chrome.browserAction.setIcon({
          path: {
            32: "res/img/line_logo_48x48_off.png",
            48: "res/img/line_logo_48x48_off.png",
            64: "res/img/line_logo_128x128_off.png",
            96: "res/img/line_logo_128x128_off.png",
            128: "res/img/line_logo_128x128_off.png"
          }
        }, function() {}), chrome.browserAction.setBadgeText({
          text: ""
        }))
      })
    })
  })
});

manifest.json

{
   "background": {
      "persistent": true,
      "scripts": [ "main.js" ]
   },
   "browser_action": {
      "default_icon": {
         "128": "res/img/line_logo_128x128_off.png",
         "32": "res/img/line_logo_48x48_off.png",
         "48": "res/img/line_logo_48x48_off.png",
         "64": "res/img/line_logo_128x128_off.png",
         "96": "res/img/line_logo_128x128_off.png"
      },
      "default_title": "LINE"
   },
...

gpioblink commented 4 years ago

とりあえずはこのコード元に既存のvideo-typingをextension化するか

gpioblink commented 4 years ago

いや、今storybookのままではないか

gpioblink / video-typing

chrome拡張機能に移行 #1