とほほのChrome拡張機能開発入門 - とほほのWWW入門
Chrome の拡張機能を開発する手順について説明します。まずは、拡張機能が実行されたらポップアップを表示するだけのものを作成してみます。下記のフォルダとファイルを作成します。 my-extension manifest.json popup.html { "name": "My Extension", "description": "My Extension", "version": "1.0", "manifest_version": 3, "action": { "default_popup": "popup.html" } } <!DOCTYPE html> <html> <body> <h1>Hello world!</h1> </body> </html> Chrome で chrome://extensions を開き、[パッケージ化されていない拡張機能を読み込む] から上記
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
君がエッチなことを考えるとみんなのブラウザに流れ星が降るChrome拡張 - Qiita
2022/04/28：追記 公開していたzipファイルのリンクを削除しました。 バックエンドのサーバーを停止しました。 伴ってもう星が流れなくなります。 ※この記事にはちょっとだけエッチな内容が含まれます！苦手な方はご注意ください。 こんにちは。あんど(@ampersand_xyz)と申します。 いきなりすみません、タイトルにエッチとか入ってて驚かれた方もいらっしゃることでしょう。どういうことなのか説明させていただきます。 概要説明 画像出典： 吸血鬼すぐ死ぬ 9巻 P134 盆ノ木至 秋田書店 __要するにこれです。__さすがに宙に星を降らせるわけにはいきませんので今回はブラウザ内に星を降らせていきます。 漫画のコマを見ただけでは何を言ってるのかご理解いただくのが難しいかもしれませんが、これ以上説明のしようがありませんのでついてきてください。 実現方法 いかにしてエッチなことを考えている
chrome-extension-cli
Chrome Extension CLI The CLI for your next Chrome Extension. 🚀 Quick Overview Then follow these instructions to see your extension: Open chrome://extensions Check the Developer mode checkbox Click on the Load unpacked extension button Select the folder my-extension/build When you're ready to publish to Chrome Web Store, create a minified bundle with npm run build and zip it with npm run pack. Or
Chrome拡張(Chrome-extention)でクリックイベントが発火しない | 俺的技術記録
問題 Chrome拡張でクリックイベントが発火しない Chrome拡張でのこと。(Chrome Extention) 拡張で操作したいWebページが、Javascriptのイベント処理なんかで、formへの入力値をこねくり回し処理しているような場合。 (ある選択肢を選ぶと、入力項目が変化する場合、など) jqueryで値をセットしても、その値を認識してくれない場合がある。 おそらくフォームに入力された値を、入力値の変化のイベントを受けて、裏でこねくり回して、 hiddenか何かのフィールドに収めているのだと思う。 Chrome拡張 でなければ、 $("#dom").val('value').change(); とか $("#dom").trigger("change"); とか、書けばいいのだけれど。 Chrome拡張では、これではイベントは発火しない。 Chrome拡張では、ページのDO
ブラウザ拡張の権限でどこまで悪いことをできるのか？とその対策【デモあり】 - Qiita
[2018/07/07 追記] 本記事ではChrome拡張について説明していますが、Firefox1やEdgeの拡張機能もほぼ同じ仕組みで動いています。 [2023/11/06 追記] #参考 ページを追加しました。 Chrome拡張。便利な機能を簡単に追加できるので使っている人も多いと思います。 ただ、インストール時の権限の注意書きが分かり難いので無条件に承認（追加）していることもあるのではないかと思われます。 そこで、本記事ではChrome拡張の権限の種類・確認方法の他、拡張がどこまで（悪いことを）できるのかとその対策を3段階の権限（危険性）レベルごとに紹介していきたいと思います。 便利だが危険性もあるChrome拡張 Chrome拡張をインストールすると、Webページを読むというブラウザ本来の機能だけでなく様々なことができるようになります。 例えば、Webメールの新着通知や記事などの
CRX Viewer
Images Code Markup Locales Misc Listing Download CRX Open Enter the URL of a Chrome Extension, Firefox addon, zip file, or the page in the Chrome Web Store, Firefox addon gallery, Edge Addons Store or Opera addon gallery. or select a local file → Generate or modify URL of Chrome Web Store item Extension ID Operating system Windows Linux macOS Chrome OS BSD Android Architecture ARM x86-64 x86-32 Na
Chrome extension source viewer - Chrome拡張のソースコードをその場で確認 | ソフトアンテナ
現在世界最大のシェアを誇るGoogleのWebブラウザ「Chrome」。 使用できる拡張機能もChrome Webストアで大量に公開されていますが、利用中のユーザーが少なかったり、レビューが全く投稿されていなかったりするものは、セキュリティの面から使用に不安を覚える場合もあるかもしれません。 本日紹介する「Chrome extension source viewe(CRX Viewer)」はそのような場合に便利な、Chrome拡張のソースコードをその場で確認できる拡張機能です。 ソースコードを理解するにはJavaScriptの知識が必要になりますが、拡張機能の安全性を確認や、拡張の動作を調べたい場合に役立てることができます。 Chrome extension source viewerの使用方法 GoogleでChromeウェブストアを開き「Chrome extension source
Chrome 拡張機能のマニフェストファイルの書き方 - Qiita
お断り (2022-12-13 追記) この記事はマニフェストのバージョンが 2 の時点で作成したものですが、マニフェストの最新バージョンは 3 であり、Chrome Web Store においてはバージョン 2 の拡張機能が すでに受け付けられない状態 です。 それでもなおこの記事を参照される場合は、公式の マイグレーションガイド も合わせてご確認いただければと思います。 Overview https://developer.chrome.com/extensions/manifest についての自分用おぼえがきです。 マニフェストファイルの書き方にフォーカスしていますので、個々の用語の説明などは端折ったりしています。 記載が必須の項目 以下の項目は、マニフェストファイルに必須です。 manifest_version マニフェストファイル自身のバージョンです。 現在のバージョンは 2 で
Chrome拡張を簡単に作れるテンプレとライブラリ造ったので紹介 - Qiita
Chrome拡張を長年造ってきたなかで 手法や自作ライブラリが充実してきたのでこの辺で公開します。 Chrome拡張は本当に効果的に改善できて、すばらしい仕組みです。 これで皆さんが簡単に現場改善が進んだら嬉しい限りです。 (なお、これは 2017-08-05 Builderscon Tokyo 2017 でのトーク用に作成した資料です) わりと ウケた 改善 どんなことができるのか、ざっと見てみましょう。 サンプルページ ※各項目ごと、「拡張を有効化」をクリックすることで拡張が入った状態を見ることができます。 Chrome拡張を作るのに必要な 環境 必要な環境はシンプルです。 Google Chrome Text Editor or IDE(UTF-8 が扱えるなら何でもいい) （公開するなら）Zip 圧縮ができるソフトウェア （公開するなら）クレジットカード これだけ。 あとは、ソース
3. 機能追加編 - Chrome 拡張機能を作ろう
Chrome 拡張機能を作ろう 機能追加編 前回までは元ページの軽微な改変をしてきました。 今回は元ページに機能を追加するための方法を学びましょう。 多くのアプリにはブラウザだけで利用できるウェブ版があります。 ウェブページに機能を追加できるということは、SNSやコミュニケーションアプリなどにも機能を追加できるということです。 新しい機能のアイデアがあったとしても、ゼロからアプリを開発して、そのアプリを使ってくれるユーザを獲得して…というのはとてもとても大変です。 既存のアプリに機能を追加する方法は、新しいアイデアを手早く試して評価するというデザイン・研究に使える武器のひとつになるはずです。 目次 HTML要素を作って追加する イベントハンドラを追加する 見た目を操作する イベントハンドラで要素を追加する Objectを使ってランキングを作る 1. HTML要素を作って追加する doc
1. 前提知識編 - Chrome 拡張機能を作ろう
Chrome 拡張機能を作ろう前提知識＆ウォーミングアップ編 p5.js での演習を通して身に付けたプログラミング言語 JavaScript を利用して、ウェブブラウザの１つである Google Chrome の拡張機能を作ってみましょう。 JavaScript がさらに身に付き、将来、ウェブアプリを作るときに役立つ様々な知識も身に付くはずです。 目次 ウェブブラウザって何？拡張機能って何？ HTML と CSS 手動でウェブページを書き換えてみよう Console にプログラムを入力してウェブページを書き換えてみよう 準備 ウェブブラウザとして Edge か Chrome が必要です。 Windows であれば最初からインストールされている Edge を使うことができます。 それ以外の方は Chrome をインストールしてください。 補足：Edge と Chrome は中身はほとんど
うちでChrome拡張機能を作ろう - Qiita
この記事はNTTコミュニケーションズアドベントカレンダーの8日目の記事です。 昨日は、@suzusuzu さんの 「Rustで実装するNetflow Collector」でした。 はじめに どうもこんにちは 昨年はこんな記事を書いたtetrapod117です。 今年はおうち時間が長かったので、いろいろ仕事以外でも趣味の開発をやったりしていました。 その中でChrome拡張を作ったりもしたので、今回は2020年っぽいChrome拡張を作って、Chrome拡張の開発について学ぶ記事を書いていこうと思います。 （お）うちでChrome拡張機能を作（るのに役立てばいいだ）ろう という感じで書いていきます ちなみに、Chrome拡張はお仕事ではなくプライベートな趣味で作ってます。 まず、Chrome拡張って？ Chromeの機能を拡張できるプログラムのことです。 拡張機能はChromeウェブストアか
Chrome拡張の作り方 (超概要) - Qiita
【更新情報】 ・2020.12.25 別記事でこの記事の「ガチのやつ」にフォーカスしたものを書きました！ ▼ kintoneのスレッド投稿がスマートになるChrome拡張をVue.jsで作る https://qiita.com/RyBB/items/3f343252b0397e93050e これからChrome拡張を始めたいという方はこのままこの記事を読むと良いと思います！ がっつり開発するとどんなことができるか知りたい方は上のリンクの記事を読むと良いと思います！ はじめに 普段、Chrome拡張使ってますか？ そもそもChrome使ってますか？ 使っている方であればわかると思いますが、 Chrome拡張はとても便利な機能です。ブラウザを自分流にカスタマイズすることができます！ そんなChrome拡張はストアからインストールするだけでなく、 自作 することもできます！ (ストアに公開しなけ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Rob--W/crxviewer: Add-on / web app to view the source code of Chrome / Firefox / Opera 15 extensions and zip files.
Chrome拡張機能の作り方を分かりやすく解説
ChromeやEdgeの拡張機能複数にマルウェア実装。すでに300万人がダウンロード