CRXJS Vite Pluginを使って爆速でChrome拡張機能を作るチュートリアル(V3対応) | DevelopersIO
CRXJS Vite Pluginを使ってChrome拡張機能を作る方法を紹介します。初心者向けの入門記事です。 どうも。 えーたん（@eetann092）です。 先日社内LTに登壇しました。 タイトルは「Chrome拡張機能の開発がやめられねぇ」です。 今回はその発表内容を一部抜粋し、CRXJS Vite Pluginを使ったChrome拡張機能の作り方をチュートリアル形式で紹介します。 完成形を見る このチュートリアルでは、「ユーザーが入力した文字列と一致するハッシュタグ」がブックマーク名にある時に、まとめてタブとして開く拡張機能を作ります。 たとえば、以下のようなブックマークがあるとします。 ブックマーク名として、ハッシュタグ#morning, #zennなどが含まれています。 ここで、ブラウザの右上にある拡張機能のアイコンをクリックすると、入力欄が開きます。 ユーザーが入力欄にmo
Chrome ExtensionsでUncaught EvalErrorになったときの対処法
Chrome Extensionsで、ブラウザアクションからローカルのページを表示する機能を作成していた。 そのページには、Vue.jsを使っていたのだが Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:". というエラーが出て、うまく表示されなかった。 そのときの対処法をまとめる。 Uncaught EvalError の対処法 エラーは「'unsafe-eval'はコンテンツセキュリティポリシーで許されてい
現在開いているタブの一覧を取得・表示するGoogle Chromeプラグインを作ってみた - Life Refactoring
東京に引っ越してきて３週間目になります。 ようやく自宅にガステーブルが導入され、自炊ができるようになりました。 最初に作ったのはカレーでした。 とまぁ、どうでもいいことは置いておいて… 現在、自社で作ろうとしているチャットサービスに必要になる、ということでGoogle Chrome Extension（Chromeのプラグイン）を作ることになりました。 最初の課題としては以下の様な機能を作っていきます。 Chromeで開いているタブの一覧を取得 取得したタブのリストを指定されたページ内のulに流しこむ 例えば、ここでは www.example.com というページ内の <div id="tabs" /> に流しこむことにする タブの開閉や開いているURLの変化があったら即座に一覧の内容を更新 一覧内のタブタイトルをクリックすると、該当するタブにフォーカス まずはChrome Extensi
Chrome Extentionで高機能なデスクトップ通知を作る - TechTalkManiacs
ふと思いついたことがあって、Chrome Extentionを作っています。某所に対してごにょごにょしてデスクトップ通知をするのですが、単なる通知ではさびしいですし、なにより不便です。Opera標準のRSSリーダーのようなクリックしたらリンク先に飛ぶなどのリアクションがあるデスクトップ通知が欲しいのですが、意外とこのあたりの情報がまとまっていなくて苦労しましたのでまとめておきます。 デスクトップ通知する よく知られているようにChrome ExtentionはHTML+JavaScript+CSSでChromeの拡張が作れる仕組みです。 まず、Manifest Fileと呼ばれるJSON形式のファイルがあり、ここに記述された挙動やファイル構成を元に動作します。 デスクトップ通知を行うにも、まず使用者からデスクトップ通知をしてもいいよ、という許可をもらう必要がありますので、このファイルに許可
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
