Yahooニュースの一覧から特定のキーワードを指定して見たくない記事を非表示にするChromeの拡張機能を作ってみた。 – ノーズブログ
Yahoo!ニュースのとある記事のコメント欄を読んでいたところ、 「なんでこんなニュースばかり載せるんだ」「この話題もういい」「見たくないなら見なければいいんだけど、そもそも一覧に載せないでほしい」「加藤紗里というワードをブロックする機能が欲しい」 というコメントをみかけました。 なるほど、そんな機能ならもしかしたら割と簡単に作れるかもしれないと思い、 初めてChrome拡張機能を作ってみました。 拡張機能を作るにあたり、下記のサイトを参考にさせていただきました。 ありがとうございました。 Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介！【サンプルあり】Chrome拡張の作り方 (超概要)超最低限の Chrome エクステンションを開発しウェブストアで公開するまでの手順What are extensions? – Google Chrome（公式ドキュメント） さて
Google Chrome Extensionを作ってみた-その3- | DevelopersIO
はじめに エクステンションの中には、ツールバーアイコンの右下に動的に数字を表示するものがあります。例えば、Google Mail Checkerはinboxの未読の件数を表示していますね。 今回はこのバッジ表示の仕方についてです。 やってみる やり方は簡単です。 chrome.browserAction.setBadgeText(object details); をコールするだけです。detailsは、 text:表示する数値の文字列(必須) tabId：特定のタブに限定する場合の当該タブのid(オプション) で構成されるオブジェクトです。 ひとまずエクステンションのロード時にバッジに"0"を表示させ、ツールバーアイコンを押したらカウントアップしていくようにしてみましょう。 manifest.jsonは次のようにしました。 { "name": "BadgeSample", "version
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)を超えているとスクロールバーが表示される。 ここで、スクロールバー
Chrome 拡張機能でリクエストヘッダをカスタマイズする方法
はじめにChrome 拡張機能で外部サイトへの HTTP リクエスト時に Request Headers をカスタマイズする方法について整理した。 User Agent を変更したり、Cookie を付与したり、色々とできるようになる。 TL;DR chrome.webRequest.onBeforeSendHeaders を使う 一部の内容はイベントハンドラ内で参照できないし、設定しても保証されない User Agent を変更したり、Cookie を付与したりできる 目次はじめにTL;DR環境・条件詳細Chrome 拡張機能のライフサイクル実装方法manifest.jsonbackground.jsまとめ参考文献 環境・条件Google Chrome バージョン: 78.0.3904.108（Official Build） （64 ビット） 詳細リポジトリ: 17number/chro
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.tabs | API | Chrome for Developers
The Tabs API not only offers features for manipulating and managing tabs, but can also detect the language of the tab, take a screenshot, and communicate with a tab's content scripts. Permissions Most features don't require any permissions to use. For example: creating a new tab, reloading a tab, navigating to another URL, etc. There are three permissions developers should be aware of when working
「****」でマスクされているパスワードの中身を見せてくれるChrome拡張「Reveal」
ネットサービスで使うIDとパスワードをウェブブラウザに記録させておくと、ログイン時に自分で入力しなくても自動補完してくれるので楽ですが、手動で再入力を求められると困ってしまうもの。Chromeであれば設定の中に「パスワード」の項目があって保存しているパスワードを見られますが、保存数が多いとそれを探すのもまた大変。そんな時に、目の前の入力フォーム内の「****」というマスクを解除し、入力されている内容を見せてくれるChrome拡張機能が「Reveal」です。 Reveal - Chrome ウェブストア https://chrome.google.com/webstore/detail/reveal/coickbnhchmdngjabciaimhdhnbgnpef ブラウザ「Google Chrome」を使って上記URLにアクセスして「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で圧縮してアップロードすることでストアで公開する
誠 Biz.ID：3分LifeHacking：目的別：見たくないサイトをブロックできるChrome拡張機能5選
見たくないサイトを効率的にブロックできる、Google Chrome用の拡張機能を5つ紹介しよう。ドメイン単位のほかURLごとに指定できたり、ブロックする時間帯を指定できたり、NGワードに対応していたりと、どの拡張機能もバラエティに富んでいる。 デマを繰り返し発信したりコンテンツを無断盗用しているサイト、注目を集めるために挑発的な言動を繰り返しているサイトなど、ネット上にはあまり目にしたくないサイトが少なからずある。日ごろこうしたサイトはなるべくアクセスしないようにしていても、うっかりリンクをクリックしてしまった経験は多くの人にあることだろう。 ウイルスの配信やフィッシングを目的としたサイトなど、明らかに犯罪行為にまつわるサイトであれば検索エンジン側でブロックされることも多いし、Googleが提供しているChrome用の拡張機能「Personal Blocklist」を使って検索結果に表示
Google Chromeエクステンションのセキュリティ確保
Nov 15, 2011 さて、ずいぶんと日が経ちましたがVichromeにセキュリティの脆弱性があるとのご報告を頂きました。 http://twitter.com/#!/teramako/status/127357023242289154 つまり、コンテンツに要素を追加すると、コンテンツ側のスクリプトがその要素に対してアクセスできてしまうわけです。 Chrome Extensionとセキュリティというのは、以前から議論されている話ではありますが、エクステンションの開発者を含めて一般的に浸透されているとは言い難い状況なので簡単にまとめておきます。 まずはChrome Extensionはどのような仕組みなのかから始めましょう。 Chrome Extensionってどうやってできてるの？ 一般的なChrome Extensionは主に3つのコンポーネントから構成されていて、それはConten
GitHub が少しだけ使いやすくなる Chrome 拡張を作ってみた - Qiita
こんにちは。Sansan Android エンジニアの @rockwillj です。前回は Android アプリ向けにライセンス文書自動生成プラグインをフォークした 話でしたが、今回は Android は全く関係なくて GitHub を少しだけ使いやすくする Chrome 拡張を作ってみた話になります。 はじめに 非常に多くのエンジニアが仕事でもプライベートでも GitHub を使っていると思います。ですが長時間 GitHub を使っていると時々イラッとすることがありますよね。例えば幅固定レイアウトとか差分に空白が含まれてるとか8タブとかです そんな「イラッとする GitHub あるある」の解消に役立つのが GitHub Cheat Sheet (日本語訳) だったり Chrome ウェブストアで公開されている Chrome 拡張だったりするのですが、いちいち個別に対応していくのは結構面
Chrome拡張の開発方法まとめ その1：概念編 - Qiita
Chrome拡張の開発に必要な知識とかの覚書です。 この記事では開発の前に知っておくべきChrome拡張の全容について解説していきます。 「実際に開発しながら学ぶ」形式の解説記事は多く見られるのですが、概念についてちゃんとまとめてある記事は見当たらず、そこらへんの理解で結構苦労した覚えがあるので、そういった人達の手助けになればと思います。 対象 Chrome拡張が作りたい人 Javascriptがまあまあわかる人 Chrome拡張の各概念がいまいちわかってない人 概要 まずはChrome拡張の大まかな構造について説明します。 Chrome拡張はHTMLとCSSとJavascriptで作られています。 必要なhtml,css,jsファイルなどと後述のManifest Fileを一つのフォルダにまとめたものが一つの拡張機能のまとまりとなり、zipで圧縮してアップロードすることでストアで公開する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
英語学習が捗るGoogle Chrome拡張機能7選 | ライフハッカー・ジャパン
chrome 拡張機能でメッセージ送るとき : (*x).b=z->a+y/c
Chromeタブを整頓する拡張機能「Tabs limiter with queue」 | ライフハッカー・ジャパン