超簡単にChromeの拡張機能を作ってみる【誰でもできるよ】 - Qiita
はじめに みなさんはChromeの拡張機能を使っていますか？ 僕も使っていますが、案外Chromeの拡張機能を作るのは簡単です。 今回は、普段の業務の効率を上げるのも兼ねて自作してみました! 最低限準備するもの manifestファイル Javascriptファイル ぶっちゃけ、これだけで動きます。 実際に作ってみよう それでは実際に作成していきましょう。 今回はDとVを押すだけで、Markdownのリンクを作成する拡張機能を作成していきます。 まずは、manifestファイルから設定していきます! manifestファイル を参考にして、備忘録も兼ねて説明していきます。 今回は、最低限の設定を行います。 { "manifest_version": 3, "name": "Create markdown link", "version": "1.0.0", "icons": { "16":
プログラミング基礎演習
神戸大学国際人間科学部の学部共通科目（選択科目）として開講している「プログラミング基礎演習１・２」の講義テキストになります。 使用言語は JavaScript で、前編では p5.js 後編では Chrome拡張機能 と Google App Script を取り上げる三部構成になっています。これらを選択している理由は note 記事 にて説明しています。（おまけとして授業で用いている練習問題を有料部分に載せていますのでよろしければぜひ。） 前編：p5.js 編 p5.js で楽しくプログラミングしつつ、プログラミングの基礎と JavaScript の文法を学びます。 単元タイトル登場するキーワード
とほほの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 ExtensionにGoogle Analytics（UA）を設置する方法 - Qiita
はじめに Chrome ExtensionにはGoogle Analyticsを設置することができますが、Google Chrome Extension公式チュートリアルには旧バージョンのGoogle Analyticsの設置方法のように見受けられたので、UniversalAnalyticsの場合の設置方法を調べてみました! やり方 (全部で15分~20分ぐらい) 1. Google Analyticsのプロパティをつくります 2. トラッキングコードを入手します 3. トラッキングコードを修正して設置します 4. manifest.jsonにcontent_security_policyを追加します 5. デベロッパーダッシュボードでUAのIDを設定します 1. Google Analyticsのプロパティをつくります Google AnalyticsでChrome Extension用
GoogleアナリティクスでChrome拡張のcontent_scriptsをアクセス解析する
Chrome Extension（Chrome拡張）で、content scripts の Google アナリティクスによるアクセス解析を試してみたところ、上手くできたのでシェアしておきます。やってみたら案外簡単だったものの、情報源自体はかなり少なかったです。基本的に、以下のページで考えた方法でやってみましたところ上手くいきました。 Chrome拡張をGoogle Analyticsで解析する方法まとめ | EasyRamble 基本的な方針として、content scripts で直接トラッキングは行えないので、Message Passing で content scripts → background へとメッセージを送り、background の chrome.runtime.onMessage.addListener にイベントをトラッキングするコードを埋め込みます。 Chrom
すぐにChrome拡張機能開発できるオープンソースのテンプレート「Chrome Extension CLI」
◆ Chrome Extension CLI https://github.com/dutiyesh/chrome-extension-cli 紹介 「Chrome Extension CLI」は、npmを使って簡単にChrome拡張機能の初期セットアップができるオープンソースのテンプレートです。 $ npm install -g chrome-extension-cli /usr/local/bin/chrome-extension-cli -> /usr/local/lib/node_modules/chrome-extension-cli/index.js + chrome-extension-cli@0.2.0 added 21 packages from 11 contributors in 2.879s まずは、Chrome Extension CLIをインストールします。 $
vuejsもreactjsも使わないchrome拡張機能の作り方 - utamaro’s blog
chrome拡張機能の作り方 この記事では、一人でchrome拡張機能を開発して、ストアに上げるためのデータを作るまでをご紹介します。 また、有料のサンプルコードをBaseにて提供しています。 （googleで検索したページのタイトルをジョジョの名言に置き換える拡張機能です。） （購入はこちらから） utamaro.base.shop サンプル画像（左の検索結果が、右の画像のようになるサンプルです） ※ html, css, javascript, npmで依存関係の管理ができることを前提条件としています。 まずは、拡張機能を作るにあたっての要件を決めます。 要件 規模が大きくなっても、効率的に開発できること console.logデバッグをビルド段階で削除すること（ビルド後のソースに含まれない） html内のdomを作成する際はテンプレートとして用意したものを使う scssで開発する f
YouTubeの広告をESCキーで消せるChrome拡張機能「ESC Youtube AD」を作ってみた - 着ぐるみ追い剥ぎペンギン
YouTubeの広告をESCキーで消せるChrome拡張機能「ESC Youtube AD」を作ってみた 2017 2/23 僕は夜はお酒を飲みながらYouTubeで動画を見てることが多いです。 YouTubeで音楽聞いたりとか。生活の一部にYouTubeがあるタイプです。 今やYouTubeで生計をたてている人もいるサービスですが、どうやって収益をあげているのかと言えば広告ですね。 動画が始まる前に広告ムービーが流れたり、動画の上にバナー広告が表示されるアレですね。 全ての広告が自分にあった商品のものではないので、ほとんどの広告は「閉じるボタン」を押して消しています。 動画を再生しては、広告を消して、動画を再生しては、広告を消しての繰り返しです。 YouTubeには、これからも運営を続けて欲しいので、広告を表示するなとは言いませんが、毎回毎回マウスを「閉じるボタン」の上に持ってきて、クリ
2016年度版 僕が考えたChrome拡張機能を作るときのデザインパターン - Qiita
4年近く前の2012年に僕が考えたChrome拡張機能を作るときのデザインパターンというエントリを書きました。最近参加したイベントで「よういちろうさんの拡張機能の記事見て作ってみました〜」と声をかけてくれた人がいて嬉しかったのですが、2012年のそのエントリは、すでに内容が古くなってしまっています。最近の状況を踏まえて、内容を新しくした「2016年度版」を書いてみようと思います。 変更しようと思った点は、以下です。 prototype.jsは使わず、ECMAScript 2015で書く。 Background Page(常駐型)ではなく、Event Page(非常駐型)にする。 そもそも最初のコードセットは自分で書かない。 本文やコード的には、2012年度版をコピペしています。 （この投稿の内容は、自分のブログエントリと同じです。） 前にいくつかのChrome拡張機能を作っていて、すでに数
モバイルアプリ・Web開発にオススメの Chrome 拡張機能 10選 - Tech Blog
カップル専用アプリPairyでおなじみ株式会社TIMERSのCTOの椎名アマドです。 先日うちの社員と話してて自分が普段使ってるChrome拡張機能をしれっと紹介したら、 「生産性が上がる」とだいぶ好評価でした。 なので今回は、モバイルアプリやスマートフォンWeb開発などに役立ってる、Chromeの拡張機能を紹介します。 使う使わないでかなり生産性が変わってくるものもあるので、是非活用してみてください。 API開発に最適 JSONView オススメ度：★★★★★ JSONで来たレスポンスを、綺麗に最適化して表示してくれます。 わかりやすく色分けハイライトされてたり、配列を畳むことが出来たりと、 APIを絡めた開発では必需品です。 Postman - REST Client オススメ度：★★★★★ REST リクエストをその場で作成して送信できるクライアントツールです。 GET/POST/D
GoogleChromeにバック・ボタンを付けるURLスキームが分かった - W&R : Jazzと読書の日々
PocketからGoogleChromeの連携がiPadを便利にする どのブラウザにも付けてほしい。「後で読む」のPocketが20日にバージョンアップして、Chromeとの連携を内蔵しました。その時は気にしてなかったんです。ChromeだろうがSafariだろうが同じ... PocketのChrome連携機能。考えてみると、これが出来るのはURLのオプションしか考えられない。けれど、通常の「googlechrome:」では、全てがURLアドレス扱いになるのでコールバックはできない。するともう一つ、URLスキームがあるはず。 iOS6のURLスキームをお手軽に調べる決定版 SchemeTaker photo credit: skene via photopin ccさて、明日はiPad mini発表予定の日。薄くて軽いのが出ますように。何かと重宝するURLスキーム。だけど、作者の人が公開し
もし「はてブ」がリスト表示機能を付けたなら？Chrome拡張機能「はてなブックマーク」にリスト表示を追加。 - 着ぐるみ追い剥ぎペンギン
もし「はてブ」がリスト表示機能を付けたなら？Chrome拡張機能「はてなブックマーク」にリスト表示を追加。 2013 3/11 以前の記事でも書きましたが「はてなブックマーク」がリニューアルしてから、以前の一覧的な見せ方から、記事ごとにブロック的な見せ方に変更と大きなデザイン変更が行われました。 始めは見辛さを感じていたのですが、最近は大分慣れてきました。 しかし、ホームページを作る人のネタ帳さんが「どうしてはてなブックマークが使いづらくなったのかを真剣に考えた」という記事を書かれたように、まだまだ慣れない方も多いようです。 まぁ、”はてな”もリニューアル直後から文句言われ続けているから「その内、リスト表示機能を追加するだろう」と思っていました。 がしかし、待てど暮らせど一向にその気配がありません。 そういうことならしょうがない。よし作りましょう。 Chrome拡張機能 – “「はてなブッ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Amazonで検索した本が近隣図書館にあるかどうか教えてくれるGoogle Chrome拡張機能「その本、図書館にあります。」 - GIGAZINE
By annais Amazonで検索した本の詳細に、近隣図書館にその本が置いてあるか否かの情報を自動で追加してくれるのがGoogle Chromeの拡張機能「その本、図書館にあります。」です。 Chrome ウェブストア - その本、図書館にあります。 まず、Google Chrome上で上記サイトにアクセスします。 画面右上にある「CHROMEに追加」という青いボタンをクリック。 「その本、図書館にあります。」を追加しますか？と聞かれるので「追加」をクリックします。 拡張機能が追加されました。青色だったボタンも「CHROMEに追加済み」という文字とともに緑色に変化。 続いて、アドレスバーの右にある設定ボタンから「ツール」を選択、「拡張機能」をクリックします。 こんな感じで拡張機能一覧が表示されるので、「その本、図書館にあります。」のオプションをクリック。 表示された画面で利用する図書館
書籍代を大幅削減「その本、図書館にあります。」 - 着ぐるみ追い剥ぎペンギン
【連絡】 2019/4/23 : 修正版でver2.23を公開しました。 Facebookページを作ったので、こちらで動向とコミュニケーションとっていければ。 ついついamazonで本を購入してしまう 本を紹介しているブログなどを読むと「面白そうだな〜」とついamazonでポチッと購入してしまいます。おかげで毎月、結構な額をamazon様に支払っています。 その対策として最近はamazonの「ほしい物リスト」にまず保存して、突発的欲求を抑えています。 そして、その本が「すぐにでも読みたいか？」「長く読みそうなものか？」などを考えています。 もし一度読んでみたいだけならば、近所の図書館にその本がネットで検索しています。 最近の図書館は大体どこもネットで書庫検索ができるようになっているので便利です。 ただし、図書館の検索システムは洗練されていないので非常に使いにくいです。20世紀で時間が止まっ
検索順位チェックを即座にでき、結果を保存できるChrome拡張機能の検索順位チェックツール「SEO SERP」
About RSSで購読する WEBサイトの検索エンジンでの検索結果順位をチェックするには、GRCやフェレットプラスなどの検索順位チェックツールを使うと、効率よく、キーワードの検索順位をチェックすることができます。 しかし、特定のキーワードのみ一定期間ウォッチしたいときなどには、ツールを開かず、いつも開いているようなブラウザから直接調査したいものです。 そんな時に、手軽にキーワードの検索エンジン（Google）での順位をチェックできるChrome拡張機能をご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 指定したサイトのキーワード検索順位チェックができるChorme拡張機能 「SEO SERP」は、あらかじめ指定したサイトのキーワード検索順位をチェックして、結果を保存できるGoogl
【Chrome】どんなページでも「はてブのコメント」と「ツイート」がすぐ見れる &「英和・和英翻訳」エクステンション作ってみた。 - 着ぐるみ追い剥ぎペンギン
【Chrome】どんなページでも「はてブのコメント」と「ツイート」がすぐ見れる &「英和・和英翻訳」エクステンション作ってみた。 2012 7/02 Quickly Look (hatenaBookmark, twitter) エクステンションとはChromeの機能を拡張させるプラグインのことです。 まず一つめはQuickly Look。 「このURLについて他の人はどんな事を言っているのだろう？」と思った時に便利です。 ボタンをクリックするだけで、そのページに対する「はてなブックマークのコメント」と「Twitterのツイート」を見る事が出来ます。 こんな感じで表示されます。 また、見ているページに対してツイートしようと思った時に、ページにツイートボタンが設置されてない場合はURLをコピペして…と面倒です。 このエクステンションには「Twitterでつぶやくボタン」がついているので、ツイー
Google Chrome Extension タブの情報を取得
Google Chrome Extension で、extension をクリックされたときなどに 今開いているタブの情報（ページのURL, タイトルなど）を取得するには chrome.tags.* API を使います http://code.google.com/chrome/extensions/tabs.html 1. manifest.json で permission に tabs を追加します { "name": "My extension", ... "permissions": [ "tabs" ], ... } Samples Filter by API に chrome.tabs を選択する 2. JavaScript で API を使う 2.2 getSelected 全面に出ている（＝選択されている）タブの Tab Object を取得するには chrome.tab
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【レビュー】Amazonで本を買う前に貸し出し状況をチェック「その本、図書館にあります。」 - 窓の杜
[android-group-japan: 4143] アプリ起動時にEditTextにフォーカスが有るとIMEが開いてしまう。 - Google グループ