トップ > chrome拡張機能

chrome.storageをPromise(async/await)する

chrome拡張機能 javascript

はじめに

Chrome拡張機能を作っていると、chrome.storage.sync か chrome.storage.localを使うことが良くある。

chrome.local.sync.get( date => {
  console.log(date)
})

値取得時に簡単な処理なら良いが、複雑な処理を書くとネストが深くなりコールバック地獄になってしまうので、
Promise(async/await)を使って使いやすくする。

いつも使うので、自分用にテンプレートとして記載

書き方

準備

const getStorage = (key = null) => new Promise(resolve => {
  chrome.storage.local.get(key, (data) => {resolve(data)});
});

// 省略形
const getStorage = (key = null) => new Promise(resolve => {
  chrome.storage.local.get(key, resolve)})
});

取得時

thenの場合

getStorage().then((data) => {console.log(data)})

async/awaitの場合

(async () => {
  let a = await getStorage();
  console.log(a); // 
})();

chrome拡張機能のストレージへの容量増加と中身の確認

javascript chrome拡張機能 プログラム メモ

ストレージを増やす

Chrome拡張機能を開発中に、急にデータの保存が効かなくなり以下のエラーが出ていた。 Unchecked runtime.lastError: QUOTA_BYTES quota exceeded

もともとchrom.storage.sync.setで保存していたのだが、どうやら一つのキーに対して保存できるのは8KBまでらしく、 それ以上の保存をしたい場合、保存先の変更と拡張が必要らしい。

拡張方法

作成しているchrome拡張機能のmanifest.jsonのpermissionsにunlimitedStorageを追加する。

  "permissions": [
    "storage",
    "unlimitedStorage"
  ],

そして、chrome.storage.sync→chrome.storage.localに変更

//chrome.storage.sync.set({ key: value})
chrome.storage.local.set({ key: value})

これで同期機能は使えなくなったが、8KB上限はなくなった。

ストレージを確認する拡張機能を使う

今まで保存した内容を確認するのに以下のようなコードを打っていたが、
毎回打つのは面倒だし、使い勝手は良くなかった。

chrome.storage.sync.get(null, ((data) => {console.log(data)}));

調べてみるとchrome.storageを確認する拡張機能を見つけた。

chrome.google.com

コンソール画面から遷移して確認するが、コードを打たなくて良いのでかなり楽である。

f:id:cyamax:20210529221624p:plain

Backlogで大きくなりがちな画像を自動で小さくする

chrome拡張機能 javascript 作ってみた・やってみた プログラム

概要

Backlogのwikiに貼った画像が、横幅いっぱいに表示されてとても見にくいので、 自動で画像を縮小してくれる仕組みを作りました。

f:id:cyamax:20180625230356p:plain

やり方

1. ChromeにScriptAutoRunnerをインストール

任意のドメインで任意のJavascriptを実行できる。 本当に重宝する。便利。

chrome.google.com

2. ScriptをScriptAutoRunnerにペースト

Backlogのwikiの画像はでかすぎるから良い感じにする

ドメインの設定も忘れずに。

設定するとこんな感じになります。 f:id:cyamax:20180625231409p:plain

これで設定完了です。
あとはBacklogで大きい画像が表示されると、自動でリサイズされます。

その他

一番良いのはBacklogのサービス側でwidthを整えてくれることですね。
あと、この方法は自分の表示が見やすくなっても、他の人は見にくいままなので、無闇に大きい画像を貼るのはやっぱりやめたほうが良い。

Backlogのチケット登録時に自動でテンプレートを入れる

chrome拡張機能 javascript プログラム 作ってみた・やってみた

仕様

Backlogのカテゴリーを選択時に、予め設定したテンプレートを挿入する。

動作

動きを見たらどんなものかわかるはず。 backlog

ここが便利

チームで同じテンプレートが使え、自動で更新される
テンプレートはURLで読み込んで都度表示させるので、 BacklogのGitで管理して、テンプレートを更新（プッシュ）すれば、自動で全員更新される。

導入方法

1. Chromeの拡張機能（ScriptAutoRunner）をインストール

特定のページで設定したJavascriptを実行してくれる拡張機能。 とっても重宝しています。

chrome.google.com

2. BacklogのGitにテンプレートをpush

## テスト
実際にインサートされる文章

### その他
  • Gitに保存されたテンプレートの例 f:id:cyamax:20180624175337p:plain

もしもGitがわからなければ、直接テンプレートをコードに書いてもOK

3. ScriptAutoRunnerに登録

ScriptAutoRunnerにコードを記入します f:id:cyamax:20180624181643p:plain

このとき、どのURLで発火するかURLをAutoScriptRunnerに記入する。 上の図ではpepope.backlog.comの部分。

  • コード

4. JavaScriptを環境に合わせて変更

サンプルではプロジェクトの追加時のパスを記載しています。

var projectName="TEST" // backlogのプロジェクト名を記入。大文字注意。

// テンプレートをbacklogのリポジトリにmarkdown形式で保存。
var template = [
    ["カテゴリ１", "https://pepope.backlog.com/git/TEST/repo/raw/master/template1.md"],
    ["自分で設定しているカテゴリ名を記載", "https://pepope.backlog.com/git/TEST/repo/raw/master/template2.md"]
];

その他

スクリプトを作るよりも、ブログの記事にするほうが時間がかかる。 Backlogはとっても便利だけど、不便なところもあって、そこはアイディアで解決できる。

【Javascript】サイトのファビコンURLを取得する

javascript chrome拡張機能

f:id:cyamax:20171203112012p:plain

概要

ファビコン(favicon）とは

www.webword.jp

やり方

想定環境

  • javascript
  • favicon画像のurlは<HEAD>配下に<link rel="shortcut icon" href="アイコンのURI" >として書かれている
  • 以下コードを取得したいサイトで実行するとファビコンを取得できる

    コード

//ファビコンURL取得
function favi() {
  //favicon画像のurlはhtml内のhead->linkタグの属性relがshortcut iconのhref値に記載されている
  for (var i = 0;i < document.head.getElementsByTagName('link').length ;i++){
    if (document.head.getElementsByTagName('link')[i].getAttribute('rel') === "shortcut icon"){
      var favicon_url = document.head.getElementsByTagName('link')[i].getAttribute('href');
      break;
    } else {
      var favicon_url = '';
      console.log("取得NG");
    }
  };
console.log(favicon_url);
};

その他

URLが相対パスの場合は少し工夫する必要あり。
chrome extensionなどjavascriptを後から挿入する場合に使える。
chrome apiでもっと簡単に取れる方法があるなら教えて欲しい。

散らばったウインドウを一つにするchrome拡張機能作りました

chrome拡張機能 作ってみた・やってみた javascript

「Merge Windows Plus」作りました

Merge Windows plus - Chrome Web Store

f:id:cyamax:20170422213618p:plain

機能

散らばったchromeのウインドウをボタン一つで一画面にまとめます。


merge windows plus

他と違うの？

同じ機能を持った拡張機能は複数ありましたが、
chromeの閲覧履歴へのアクセスを求めたりと怪しいものが多かったので、
自分で作りました。
私の作った拡張機能は不要な権限を求めません！ ←大事！

なぞのアクセス要求例

※ウインドウを一つにするだけなのに閲覧履歴は必要ない f:id:cyamax:20170422211917p:plain

オススメの利用者

デュアルディスプレイを使っている方々に良いかも。

インストール

インストールはここから。
ChromeだったらMacでもWindows両方で動きます。
chrome.google.com

kintone用chrome拡張機能(kintone extension search)を公開しました

chrome拡張機能 プログラム javascript

まずはダウンロード↓
chromeストア kintone extension search

デモ画面

f:id:cyamax:20160828005106g:plain

設定方法

  1. 好きな検索フォームで「xxxx」を入力＆検索
  2. そのときのURLをコピー
  3. kintone extension searchのオプション画面でコピーしたURLを登録
    以上で設定完了

あとは好きなタイミングで拡張機能を起動して、検索。
登録したフォームで検索ワードを検索してくれます。
※URLのxxxxを検索ワードに置換しているだけです

便利な使い方

オプション画面でコマンド設定ができます。
コマンドを使用することで、登録した好きなアプリで検索できます。

またchromeの基本機能で拡張機能をショートカットで開くことができます。
非常に便利ですので設定することをおすすめします。

f:id:cyamax:20160828150918p:plain

その他ツール>拡張機能>キーボードショートカット

コマンドの使い方

f:id:cyamax:20160828130414g:plain

その他の機能

ブラウザ上で範囲選択中に右クリックすると 選択中の内容を検索することができます。

安全性について

この拡張機能は検索時のURLを保存しているだけなので、拡張機能には大事なデータは残りません。 またkintone側のAPIキーやログインパスワードなどを設定する必要がなく安心です。

コメント

kintoneってエクセルで管理しているようなデータを皆で扱うには非常に便利ですが、
アプリが増えてくると検索が非常に面倒だったので、kintone用拡張機能を作成しました。

Backlog用chrome拡張機能(slide method for Backlog) を公開しました

chrome拡張機能 プログラム javascript

まずはダウンロード

ダウンロードはこちらから↓
chromeストア slide method for Backlog

コンセプト

別サービス「esa」の良い部分（スライド）をBacklogでも使いたい！

何ができるのか

この拡張機能を使うことにより、Backlogで作成したwikiをスライドショー化できます。

f:id:cyamax:20160822121508g:plain

基本的な使い方

Backlogのwikiページを開いた状態で、
拡張機能のボタンを押下するとスライドが表示されます。
スライドはスペースキーか方向キー、マウスで操作できます。
ESCボタンでスライド全体を表示可能です。

スライド化について

以下タグによってスライド化（改ページ）しています。

h1タグ(#)：

タグに書かれた内容をセクションの見出し（１枚スライド）にします。

h2タグ(##)：

h2タグ配下をタイトルとコンテンツの１枚スライドにします。

PDF出力

スライドの最後に表示される「make pdf」を押下。
表示されたページでブラウザから「印刷」(ctrl+p)を実行。
送信先「PDFに保存」を選択し、保存。

がんばったところ

  • BacklogのAPIを使わない
    拡張機能内にユーザーのAPIキーを保存したくなかったのでブラウザのセッションのみでやり取りをしています。
    APIキーを使わないので、ユーザーも私も安心。

  • サーバーレス
    同じ理由でサーバーを挟みません。
    サーバーから情報が漏れたら怖いのでサーバーレスで頑張りました。
    なのでクロスドメインの壁を乗り越えるのが大変でした。

  • PDFを実装した
    「esa」に無い機能としてスライドからPDFを作成する機能をつけました。 ここは特に頑張っていません。工夫した点ですね。

感想

バックエンドのコーディングよりも実際にユーザが触るフロントエンドの実装が気を使う。 Chrome独自のAPIもそうですが、Ajax通信やJQuery、クロスドメイン、MITライセンスなど幅広く多くのことを学べてよかった。
Chromeの拡張機能開発はJavascriptの勉強にちょうど良いね。