Chrome拡張 つくりかた 令和最新版
数年ぶりにChrome拡張のつくりかたを調べた。 本当に何も分からなかったので、Twitterで「2022年にChrome拡張つくりたかったら何見て学べばいい？」とつぶやいてみたところ、何人かの人が教えてくれた。教えてもらった中から幾つかのリンク先を紹介するような形で記述していく。 Create a Vite-React Chrome Extension in 90 seconds - DEV Community 2022年時点だと比較的新しめのフロントエンド向けツールであるviteと、viteのChrome拡張向けプラグインである@crxjs/vite-pluginを使ってChrome拡張をつくってみよう、という記事。今回自分は主にこれを参考にしながら開発を進めた。Reactと言っているが、自分のChrome拡張ではUIは存在しなかったので、Reactに関する部分は読み飛ばして、vite
古くからのユーザ程混乱しがちな1Password機能拡張の今について確認してみた | DevelopersIO
MacのSafariやChromeの拡張を整理していく中、とあることに気が付きました。 「1Passwordの拡張が複数あるけどどうして」 1Passwordの拡張機能を意識するのは大体ログインフォーム入力時或いは新規アカウントを作成する時。後はたまに漏洩等でWatchTowerがお知らせしてくれる程度。そのため、入れ替えやら行う場合に大きく状況が変わっていると戸惑うわけです。 現状の1Passwordのブラウザ拡張について振り返りつつ整理してみました。 現在の1Password拡張機能 現在Chromeウェブストア上から検索にて辿れる拡張は以下一つ。 拡張の概要欄を見ると分かりますが、これは以前1Password Xと呼ばれていた拡張機能です。 1Password Xには1Passwordメンバーシップが必要です。まだアカウントを持っていない場合は、1Password Xをインストールし
tumblr投稿拡張機能のTaberarelooが使えない状態を改善する方法
パッチここからダウンロードする。↓ https://gist.github.com/ailispaw/3aef8857c274e22f2b41 ZIP形式でダウンロードされるので 解凍して中身のファイルを出しておく。 インストール方法Taberarelooのアイコンを右クリック⇒「拡張機能を管理」 ⇒オプション⇒「パッチ」クリックで 「ファイルを選択」⇒インストールすればOK これで従来通りTaberarelooが使えるようになる。 Taberarelooの様々な機能から、tumblrに投稿できない問題も解消した。 使えなくなった理由tumblrの仕様変更で投稿ができなくなっていた模様。 今後も同様の事が起きる可能性もあるので、 そのときはパッチが出るのを持つしかないのか。
HTTP Headers という 5万人が使っている Chrome 拡張のマルウェア疑惑。セッション盗まれて BTC も盗まれそうになった話。 - clock-up-blog
疑惑どころか 99.99% くらい黒な話。 （後記：セッション盗まれたと思ってたけど、よくよく考え直してみると生パスワードごと盗まれてる可能性もあるしやばい） 追記：続報 11月3日 今回指摘した HTTP Headers 以外にも、「Tab Manager」「Give Me CRX」「Live HTTP Headers」等で同様（？）の問題が報告されています。第三者が元の作者からソフトウェア権利を買い取って悪用する、というケースが割とある模様（？）。皆さま情報ありがとうございます。 11月4日 Zaif については、「不正な Chrome 拡張」と「スクリプトから保護されていなかったクッキー」のコンボによりセッションが盗まれていた可能性あり。 Zaif のセッション情報が盗まれた原因のひとつについて。JavaScript からクッキー値を取得させない方法。 - clock-up-blog
2016年度版 僕が考えたChrome拡張機能を作るときのデザインパターン - Qiita
4年近く前の2012年に僕が考えたChrome拡張機能を作るときのデザインパターンというエントリを書きました。最近参加したイベントで「よういちろうさんの拡張機能の記事見て作ってみました〜」と声をかけてくれた人がいて嬉しかったのですが、2012年のそのエントリは、すでに内容が古くなってしまっています。最近の状況を踏まえて、内容を新しくした「2016年度版」を書いてみようと思います。 変更しようと思った点は、以下です。 prototype.jsは使わず、ECMAScript 2015で書く。 Background Page(常駐型)ではなく、Event Page(非常駐型)にする。 そもそも最初のコードセットは自分で書かない。 本文やコード的には、2012年度版をコピペしています。 （この投稿の内容は、自分のブログエントリと同じです。） 前にいくつかのChrome拡張機能を作っていて、すでに数
Chromeエクステンションを作ろう：コンテントスクリプト編 - Qiita
説明で使用した拡張機能はこちらからインストールできます. 一人でも多くの方に利用いただければ幸いです. ソースコードはこちらから閲覧できます. コンテントスクリプトとは 特定のWebページに、JavascriptやCSSなどを挿入できます. このプラグインで主に利用した機能になります. コンテントスクリプトは、セキュリティの観点からいわゆるサンドボックスの中で実行されます. コンテントスクリプトから対象WebページのDOMにはアクセスできますが、対象Webページのグローバルオブジェクト(グローバル変数やグローバル関数)にはアクセスできません. また、対象Webページからコンテントスクリプトのグローバルオブジェクトにアクセスすることもできません. コンテントスクリプトでは、Chrome-Javascript-APIの一部を利用することもできます. 具体例 <script> $('#hoge'
Chrome 拡張機能のアイコンファイルを確実に見つける方法 - 情報系大学院生のWebメモ
カスタマイズ好き必見！Chromeの拡張機能のアイコンを変える方法 - 情報系大学生のWebあれこれ備忘録の補足記事です。 上記記事の手順中に、大きさが 19×19 で、拡張子が png のアイコンファイルを探したら、条件に合うファイルが複数見つかることがあります。これらのファイルの中からアイコンファイルを確実に見つける方法があります。 Evernote Web Clipper を例にして、アイコンファイルを確実に見つける方法を説明します。 アイコンファイルを見つける方法 エクスプローラーを起動し、C:\Users\<ユーザー名>\AppData\Local\Google\Chrome\User Data\Default\Extensions\<拡張機能の ID>\<バージョン名> を開きます。 Evernote Web Clipper の場合、C:\Users\<ユーザー名>\AppDa
chrome extensionsで使うアイコンのサイズ整理 - tweeeetyのぶろぐ的めも
はじめに chrome extensionsで機能拡張を作るときアイコンをいくつか用意するけどなんかサイズがいろいろあってよくわからん。 合ってるかわからないけど、調べてみたパターンをメモっておきます アイコンパターン サイズ順ではなく用途でまとめてます iconサイズ 用途 サンプル 主に拡張機能そのもの系 48 拡張機能ページ(chrome://extensions)用 manifest.jsonに icons:{48:"icon48.png"} で指定 128 ユーザが拡張機能をインストールする際に使われる? manifest.jsonに icons:{128:"icon128.png"} で指定 32 拡張機能をギャラリーに登録する時用 manifest.jsonに icons:{32:"icon32.png"} で指定 browserAction pageAction系 19 b
Chrome 拡張機能のマニフェストファイルの書き方 - Qiita
お断り (2022-12-13 追記) この記事はマニフェストのバージョンが 2 の時点で作成したものですが、マニフェストの最新バージョンは 3 であり、Chrome Web Store においてはバージョン 2 の拡張機能が すでに受け付けられない状態 です。 それでもなおこの記事を参照される場合は、公式の マイグレーションガイド も合わせてご確認いただければと思います。 Overview https://developer.chrome.com/extensions/manifest についての自分用おぼえがきです。 マニフェストファイルの書き方にフォーカスしていますので、個々の用語の説明などは端折ったりしています。 記載が必須の項目 以下の項目は、マニフェストファイルに必須です。 manifest_version マニフェストファイル自身のバージョンです。 現在のバージョンは 2 で
いまさらまとめるChrome ExtensionでのJavaScript挿入 - console.lealog();
今さらやけど、まとめ。 注：自分用まとめのため、下記リンクとか見ていただいた方が幸せになれるかもしれません。 参考：Hello There! - Google Chrome メッセージングとかそういった高尚な内容にも踏み込まないレベル。 最低限の構成 Chrome拡張！とは言えそんな身構える必要はなくて、最低限のファイルさえ用意すれば、ちゃんと動いてくれます。 manifest.json (アイコン) ほんと、最小限すぎるけどコレだけでも立派な拡張として認識してくれますｗ manifest.json { // Require! "manifest_version": 2, "name": "myEx", "version": "1.0", // Recommend. "description": "My first extension.", "icons": { "16": "icons/
Chromeエクステンションでcontentの情報を取得する - Qiita
初めてChrome Extention作ってみました。 https://github.com/NewGyu/redmine_tickets_printable そもそも論的なところはこんないいまとめ http://developer.chrome.com/extensions/overview.html http://dev.screw-axis.com/doc/chrome_extensions/guide/ があるので割愛して、自分が詰まったところをメモ代わりに書いておきます。 ざっくり要件 今回作ったのはRedmineのチケット一覧を付箋みたいにブロックを並べた見た目にするものです。 Redmineのチケット一覧はリスト形式で、それをA4印刷して貼りだすと小さくて読めないので大きく、付箋っぽくしようというものです。 before after そして、今回はブラウザアクションではなくペ
Octotree·GitHub利用者は必見！GitHubでツリー表示 MOONGIFT
GitHubのUIは先進的で、かなり見やすいものです。初心者にも分かりやすく使いやすいのですが、毎日のようにGitHubを使っている人たちにすればもっと素早くファイルを見ていけるようにしたいと思うでしょう。 そこで使ってみたいブラウザ機能拡張がOctotreeです。ブラウザ画面の左側にファイルブラウザ機能が追加されます。 Octotreeの使い方 OctotreeはGoogle Chrome、Firefox、Safari向けに機能拡張/アドオンが提供されます。 インストールされた状態で任意のリポジトリに行くと、このようにファイルツリーが左側に表示されるようになります。 フォルダを開いてより深い階層のファイルへも素早くアクセスできます。 左側の表示ではブランチを切り替えられませんが、通常のGitHub側でブランチを切り替えると左側のツリーもそれに伴ったものに変更されます。また、プライベートリ
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
http://blog.monoweb.info/blog/2012/11/08/chrome-event-pages/
See related links to what you are looking for.
僕が考えたChrome拡張機能を作るときのデザインパターン
最近いくつかのChrome拡張機能を作っていて、すでに数千人のユーザを獲得できているものが出てきてたりします。 Image collector extension goo.gl URL Shortener extension mixi Check button extension Semantic inspector これだけ作ってると、何となく自分でのChrome拡張機能を作り出す際のデザインパターン・・・っていう大それたものじゃないけど、ようはテンプレが確立されてきます。全く褒められない書き方をしているかもしれませんが、ここでそのテンプレ達を晒しておこうかな、と思います。 manifest.json まずはChrome拡張機能の要であるマニフェストファイルです。これは誰が書いてもさほど変わらない記述内容となるでしょう。 { "manifest_version": 2, "name":
DevTools Extensions For Web App Developers
March 26, 2013 The past year has seen many leaps made to improve developer productivity through better tooling. We're paying increasing attention to our workflow and many of us have spent time optimising our usage of tools like Grunt, Bower, Yeoman and the terminal. Another important area worth spending time on is your debugging workflow - if you're like me, this starts with the Chrome DevTools. W
Klepto proxy by kyo-ago
Kleptoとは？ JavaScript, CSSの開発者向けのLocal Proxyです。 何ができるの？ 現在以下の機能が実装されています。 通信内容の閲覧（network list） 通信内容の差し替え（auto responder） Chrome developer tools上で書き換えた内容のローカルファイルへの反映（auto save） ローカルファイルが更新された場合にブラウザをリロード（auto reload） （注 現在Windows環境では「通信内容の閲覧」と「通信内容の差し替え」が正しく行えません） 動作環境 MacOSX版Chrome version 25以上（2013/03/01の安定版最新） 現在Windows環境では「network list」と「auto responder」が動作しません（1ページ通信するとそれ以上通信できなくなる） 「auto save
Tincrを使って、Chrome Developer Toolsでの変更をソースコードに反映する
--> tree app app ├── 404.html ├── favicon.ico ├── index.html ├── robots.txt ├── scripts │ ├── main.js │ └── vendor │ ├── jquery.min.js │ └── modernizr.min.js └── styles └── main.css Chrome Developer ToolsのTincrタブでProject Typeを選択、Http Serverの場合はルートディレクトリの設定のみ。 Enable Loggingにチェックを入れておくとConsoleタブにログが出てくる。 Content for url http://localhost:8000/scripts/main.js matches local file /Users/tnishibayashi/d
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - anthonyec/powerlet: ⚡️ Chrome Extension to quickly find and run bookmarklets
Blank Tab - Microsoft Edge Addons