Chrome 拡張機能を作って公開しよう⑥ 〜コンテキストメニューを作る〜 - Qiita
この記事は、先日ブログに投稿したものと同じ内容です。ぜひ、ブログの方もご覧ください。 1回15分で拡張機能を作るシリーズ、第6弾！ 拡張機能も完成に近づいてきました！今回は、更に利便性を向上させるため、コンテキストメニュー(右クリックで開けるメニュー)からも拡張機能を起動できるようにします。 background.js の作成 開発用フォルダの一番上の階層に、background.js を作成してください。 これは、バックグラウンドで動く JavaScript ファイルで、ここからコンテキストメニューを作成することができます。 また、これを使用するにあたって、manifest.json の変更が必要になります。 manifest.json の書き換え manifest.json の permissions を以下のように書き換えてください。
Chrome Extension の作り方 (最終話: メッセージパッシング) - Qiita
Chrome Extension の作り方 (その1: 3つの世界) - Qiita Chrome Extension の作り方 (その2: Contents Script) - Qiita Chrome Extension の作り方 (その3: Browser Action / Page Action) - Qiita Chrome Extension の作り方 (その4: Event Page / Background Page) - Qiita の連載の最終回！！ ChromeExtensionを作っていると「メッセージパッシング」という言葉を見かけます。 Message Passing - 公式 Chrome Extension の作り方 (その1: 3つの世界) - Qiitaの説明の通り、3つの世界があるのですが、異世界とやり取りしたい状況が出てきます。 今回のサンプルでは c
ブラウザ拡張機能におけるメッセージパッシング - Qiita
はじめに ChromeやFirefoxで採用されているWebExtensionsによる拡張機能の開発を前提に話をします。 拡張機能の作り方は思ったより簡単ですし、ストアへの公開時の審査も厳しくないので敷居は低く、でも自分や他人の役に立ちやすいので、おすすめの開発だと思います。 HTMLとCSSとJavaScriptで作れます。 今回はこのブラウザ拡張機能を作るときに使用するメッセージパッシングについてです。 拡張機能の構成について さて、この拡張機能ですが、作成するときに大きくわけて2つの部分から構成されます。 （1のみとか2のみの拡張機能もありますが、その場合は特に言うこともないので） 拡張機能自体（background,popup） Webページに埋め込まれる機能(content_scripts) 拡張機能自体の部分 backgroundのスクリプトはブラウザが起動したときにロードされ
Chrome拡張機能 manifest.json Ver.3の書き方 - Qiita
はじめに 現在のChrome拡張機能のマニフェストのバージョンはV2とV3がありますが、こちら によると、 - 2022/1/17 でmanifest v2で新規公開はできなくなる - 2022/6でmanifest v2で非公開でも新規登録はできなくなる - 2023/1で例外を除き,既存のmanifestV2の機能は動かなくなる - 2023/6でmanifestV2は例外なく動かなくなる とのことなのでよっぽどの理由がない限りV3を今後は使うことになります。 V2で書かれた情報の記事はいっぱいあったのですが, V3の記事はあまりなかったので自分用メモも兼ねて整理しようと思います。 manifest.jsonの基本設定 manifest_version 拡張機能自体のバージョンではなく、マニフェストのバージョンです。 ここはとにかく 2 ではなく 3 にしておきましょう！
WebExtensionsでPopupを作るときのサイズに関するへんな挙動 (+自作WebExtensions紹介) - Qiita
WebExtensions(ブラウザ拡張機能)では、 ツールバーのボタンを押したときにポップアップウィンドウを開くことができる。 ChromeとFirefoxの両方で使えるWebExtensionsを作ったとき、 Popupのサイズ周りでいくつかつまずいて、力づくで直した内容をメモしておく。 作った拡張機能の宣伝もあるよ！ ※環境 Chrome: macOS 65.0.3325.162(64bit) Firefox: macOS 59.0.1(64bit) 1. Firefoxのスクロールバー幅問題 Popupするウィンドウのサイズは、PopupするHTMLのbodyタグのwidthやheightなどにcssで指定する。 この場合、ウィンドウ幅は400px固定で、高さはコンテンツの高さに合わせられるが、 最大値(600px)を超えているとスクロールバーが表示される。 ここで、スクロールバー
Create React Appで始めるChrome拡張 - Qiita
テックタッチアドベントカレンダー12日目を担当する@takakobemです。 11日目は @taisa831 による Goのtestingパッケージの基本を理解する でした。 JavascriptではBenchmarkのようなパフォーマンスをテストするものがない（したことがないだけかもしれない）のでいいなぁと思いました。 はじめに 今回はFacebook公式であるcreate-react-appを使ってChrome拡張を作ってみたいと思います。 Chrome拡張といっても、機能は大きく分けて3つあります。 ポップアップ コンテントスクリプト バックグラウンドスクリプト 今回はこれらを全て作っていきます！ 今回実装したものは https://github.com/takakobem/react-chrome-extension-boilerplate にコミットしてあります。 create-
ReactでChrome拡張を開発して公開したお話 - Qiita
はじめに この記事は、KIT Developer Advent Calendar 2019 2日目になります。 Advent Calendarの時期が来ると、今年ももう少しで終わるな〜っていう実感が湧いてきますね。 それでは、ReactでChrome拡張を開発して公開したお話について書いていきます! 今回開発したもの タブを管理するActive Tab ListerというChrome拡張になります。 開発背景 Chromeを使っていて、以下のことに困っていました。 前に見ていたページを探したいと思った時に、開いているタブが多いと、ページタイトルが見切れてしまい切り替えることが困難 見ているページをスマートフォンやiPadですぐに見たいときに、Slackなどで送るのは手間 Chromeのタブをたくさん開いていると、メモリを沢山消費しているので開いているが不要なタブをサクッと削除したい しかし
Chrome拡張でのユーザーエージェント書き換え実装 - Qiita
chrome.webRequest.onBeforeSendHeaders.addListener( function(info) { var headers = info.requestHeaders; headers.forEach(function(header, i) { if(header.name.toLowerCase() == 'user-agent'){ header.value = "書き換えたいユーザーエージェント"; } }); return {requestHeaders: headers}; },{ urls: [ <対象サイトたちのマッチパターン列挙> ], types: ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest"] },[ "b
TypeScriptでChrome拡張を作ろう！ - Qiita
この記事はコネヒト Advent Calendar 2020 - Qiita 14日目の記事です。 まえがき 個人的に一番使っているウェブブラウザはChromeなのですが、御存知の通りChromeには「Chrome拡張」というプラグインで更にChromeを便利にすることが出来ます。 「欲しい機能」を探すのも楽しいのですが、自分でChrome拡張を作ることで「学ぶ楽しみ・作る楽しみ」を味わうことが出来ます。 尖った技術ももちろん楽しい学びになるのですが、今回は前述の通り、普段使うブラウザを「自分でより使いやすく拡張する」技術にフォーカスしてお送りしようかと思います。 TypeScriptの説明よりもChrome拡張の設定ファイルである manifest.json の各項目の説明がメインになっているので、TypeScriptについてはKindle Unlimitedに無料で学習できる本もあるの
【初心者】chrome拡張をTypeScriptで開発するときのWebpackの設定 - Qiita
const CopyPlugin = require("copy-webpack-plugin"); /** * @type import("webpack").Configuration */ module.exports = { mode: process.env.NODE_ENV || "development", devtool: "inline-source-map", entry: { popup: `${__dirname}/src/popup.ts`, content: `${__dirname}/src/content.ts`, }, module: { rules: [ { test: /\.ts$/, use: "ts-loader", exclude: /node_modules/ }, ], }, resolve: { extensions: [".ts", ".
TypeScriptで作るイマドキChrome拡張機能開発入門 - Qiita
Chrome拡張開発の入門資料は世の中にたくさんありますが、結構昔に書かれたものが多く、イマドキ風(といってもそんなに新しくもないですが笑)にTypeScriptを使った場合の開発方法を記しました。 なお、初心者の方向けに、簡単ではありますがChrome拡張の仕組みから説明していきます。 Chormeの拡張の仕組み 以下の3つの登場人物を覚えればOKです。 Content Scripts ページのDOMを操作(取得・追加・更新・削除)できるscript。(3つの登場人物の中では唯一) ただし、アクセスできるChromeのAPIは一部に制限されている。 これを使って特定のページに独自のUIを埋め込んだりできる。 Browser Action(Page Action) アドレスバー右に並んでいる拡張機能のアイコンをクリックしたときのアクション。 様々なChromeのAPIにアクセスできる。 E
Chrome 拡張を使って今開いているタブの DOM を操作する - Qiita
Content Scripts を使う。 ボタン押下とかショートカットキーとかそういうイベントで操作したいなら、 Background から content script のイベントハンドラを呼ぶことになる。 以下、 選択したテキストを<samp>要素でラップする例。 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { if (request.text == "code-block") { const selection = window.getSelection().toString().replace(/\n/g, "<br/>"); const insertContent = `<samp>${selection}</samp>`; document.execCommand("
サボろうとするとメンターが現れるChrome拡張機能 - Qiita
完成品 作業をサボってTwitterやYoutubeを見始めるとメンターが現れるChrome拡張機能を作りました。 （ストアに公開はしていません） ※メンターには以下の動画を使用しています。 https://www.youtube.com/watch?v=IZmYn4ObRJc 類似作品 進捗がなかったらメンターが現れるATOM 進捗がなかったらメンターが現れるエディター 使い方 以下からgit cloneまたはダウンロード。 https://github.com/watatakahashi/block-menter Chromeからchrome://extensions/を開き、右上のスイッチからディベロッパーモードをオンにした後、「パッケージ化されていない拡張機能を読み込む」で、先程ダウンロードしたフォルダを選択。 これで完了。 作り方 こちらを参考にしました。 Chrome機能拡張の
Google Chrome拡張でContent Scriptsを注入するタイミングを制御 - Qiita
翻訳 manifest.jsonのrun_atプロパティの説明の翻訳しました。 run_atプロパティ 必須ではありません。jsプロパティのファイルを注入するタイミングを制御します。 設定値は次の三つです document_start document_end document_idle（初期値） 値ごとの注入のタイミング document_start cssプロパティのファイルの読込後、DOMが構築されscriptsが実行される前です。 document_end DOMが構築された直後、画像やフレームなどのサブリソースが読込まれる前です。 document_idle ブラウザが決定します。document_endから、window.onloadイベントまでの間の任意のタイミングです。 実際のタイミングはdocumentの複雑さによって変わります。 また、documentの読込みに掛かる時
Chromeエクステンションを作ろう：ストレージ編 - Qiita
説明で使用した拡張機能はこちらからインストールできます. 一人でも多くの方に利用いただければ幸いです. ソースコードはこちらから閲覧できます. ストレージとは 拡張機能で永続化したい情報を保存する仕組みです. Chrome-Javascript-APIから次の３つのストレージエリアが提供されています. sync local managed ストレージ系のAPIは、すべてコールバック関数で処理結果を受け取ります. UIをブロッキングしないための配慮なのでしょうが、使い勝手は良くありません. function saveChanges() { var theValue = textarea.value; chrome.storage.sync.set({'value': theValue}, function() { console.log('Settings saved'); }); } 詳細
Chrome拡張の開発方法まとめ その1：概念編 - Qiita
Chrome拡張の開発に必要な知識とかの覚書です。 この記事では開発の前に知っておくべきChrome拡張の全容について解説していきます。 「実際に開発しながら学ぶ」形式の解説記事は多く見られるのですが、概念についてちゃんとまとめてある記事は見当たらず、そこらへんの理解で結構苦労した覚えがあるので、そういった人達の手助けになればと思います。 対象 Chrome拡張が作りたい人 Javascriptがまあまあわかる人 Chrome拡張の各概念がいまいちわかってない人 概要 まずはChrome拡張の大まかな構造について説明します。 Chrome拡張はHTMLとCSSとJavascriptで作られています。 必要なhtml,css,jsファイルなどと後述のManifest Fileを一つのフォルダにまとめたものが一つの拡張機能のまとまりとなり、zipで圧縮してアップロードすることでストアで公開する
Chrome拡張機能の開発 その1-1：概要編 - Qiita
この記事について この記事はChrome拡張機能の公式ページを翻訳、補足を追記した連載記事である。ひとつ前の記事は以下を参照。 Chrome拡張機能の開発 その1：拡張機能の基礎 https://qiita.com/gtracker64/items/95bec2b584638cc03388 基礎 拡張機能は、Google Chromeブラウザに機能を追加するHTML、CSS、JavaScript、画像、その他必要に応じて追加したファイルをzip形式でバンドルしたもの。 拡張機能の本質はWebページであり、通常のWebページと同様にブラウザが提供するすべてのAPIやJSON、XMLHttpRequest、HTML5を利用することができる。 拡張機能は"ContentsScript"や"Cross-Origin-XMLHttpRequest"を利用して、Webページやサーバとデータをやりとりで
GitHub が少しだけ使いやすくなる Chrome 拡張を作ってみた - Qiita
こんにちは。Sansan Android エンジニアの @rockwillj です。前回は Android アプリ向けにライセンス文書自動生成プラグインをフォークした 話でしたが、今回は Android は全く関係なくて GitHub を少しだけ使いやすくする Chrome 拡張を作ってみた話になります。 はじめに 非常に多くのエンジニアが仕事でもプライベートでも GitHub を使っていると思います。ですが長時間 GitHub を使っていると時々イラッとすることがありますよね。例えば幅固定レイアウトとか差分に空白が含まれてるとか8タブとかです そんな「イラッとする GitHub あるある」の解消に役立つのが GitHub Cheat Sheet (日本語訳) だったり Chrome ウェブストアで公開されている Chrome 拡張だったりするのですが、いちいち個別に対応していくのは結構面
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
自作のChrome拡張機能をManifestV3に移行してみた - Qiita
chrome拡張機能のpopup画面を閉じる方法 - Qiita
