はてブの記事を、キーワードや URL でミュートする Chrome 拡張を作った
【追記】Firefox 版も出しました。 はてなミュート - Chrome ウェブストア https://chrome.google.com/webstore/detail/agomiblbpgcimbonnfmlcealkjlegbnf 機能指定したワードを含む記事をミュート指定した URL (の一部) を URL に含む記事をミュート指定した記事を単体で非表示にする訪問済みの記事を目立たなくする（ on/off 選択可）ブコメページを訪問済みの記事を目立たなくする（ on/off 選択可）1, 2 をする拡張は既にあるけど、下記の機能はこの拡張だけで使える。 記事をその場でミュートするhttps://cdn-ak.f.st-hatena.com/images/fotolife/a/anond_user/20230305/20230305094515.png ミュートアイコンを押すと、ポ
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拡張機能【今日のライフハックツール】 | ライフハッカー・ジャパン
三井住友カード ゴールド(NL)のデメリットは?メリットない・いらないは勘違い【年会費無料になる100万円修行のコツ】
Chrome拡張機能「Amazing Searcher」を作った時の備忘録
2022/07/14追記 改良版のChoomameについての記事も書いています。ぜひご覧ください。 概要 Googleの検索結果に期間や言語の絞り込みボタン、検索ワードに関連したリンクを表示するChrome拡張機能「Amazing Searcher」を作りました。この記事はその際の備忘録です。 ↓公開先 ↓紹介編 Manifest V3 以前作ったChrome拡張機能「Mr.Sagasu (紹介記事)」や「Mr.Jimaku (紹介記事)」は Manifest V3 の登場前だったため、Manifest V2で作成しましたが、今回作成した Amazing Searcher はV3です。 V3での変更点については、Manifest V3 への移行ガイド やManifest V3 チェックリスト を参考にしました。 自動リロード対応 background pagesが Service work
Chrome Devtoolのmonitorを使うと関数の呼び出しを観察できて便利 - ぱすたけ日記
を読んで思い出したのでご紹介です。 元の記事と同様に以下の関数 sum について、 function sum(nums, acc = 0) { console.log({ nums, acc }); if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } この関数sumの引数 (nums と acc) の呼び出しごとの変化を見たい場合は、所謂プリントデバッグや debugger を使うのは一般的なテクニックとしてよく知られていますが、このような関数呼び出し時の引数を知りたい場合はmonitor(function)という関数を使うことで同様の効果を得ることが出来ます。 この場合は monitor(sum)とした後に、関
開発体験を変える! Chrome DevTools Tips 7選 - Qiita
最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で
YouTubeの動画広告をスキップする拡張機能を作ってみた - Qiita
はじめに アウトプットの一環としてObserver系のAPIを使って何か拡張機能を作りたいと思っていたので、YouTubeの広告をスキップするChrome拡張機能を作り、Chromeウェブストアに公開しました。 作ったもの：YT Ad Skip 作業の流れ 拡張機能の公開までにやったことは大まかに3つです。 処理をJavaScriptで書く manifest.jsonを用意 Chromeウェブストアに公開申請 1.処理をJavaScriptで書く 完成したコードがこちらです。 { const hostName = location.hostname; const subDomain = hostName.split('.')[0]; const newStyle = document.createElement('style'); newStyle.innerText = '.ytp-ad
オープンソースのエディタ「Visual Studio Code」がChromeブラウザのデバッガプロトコルに対応。エディタから直接デバッグ可能に
オープンソースのエディタ「Visual Studio Code」がChromeブラウザのデバッガプロトコルに対応。エディタから直接デバッグ可能に マイクロソフトがオープンソースで公開している「Visual Studio Code」が、Chromeブラウザのデバッガプロトコルに対応したことが発表されました。 Visual Studio Codeのエディタ画面から、Chromeブラウザで実行しているJavaScriptのブレークポイントの設定と実行と停止、変数の参照などが可能になります。 JavaScriptのSoruce Map機能も働くため、圧縮済みのコードを実行しても自動的にVisual Studio Code上の圧縮前のJavaScriptコードに対応してそのままデバッグ可能。また同様の仕組みのおかげでTypeScriptのコードもVisual Studio Code上でそのままデバッ
突貫ではてな匿名ダイアリーのChrome拡張作った
https://chrome.google.com/webstore/detail/masudalert/clkiaalhgfhgcllngddndbghoaahhnfa 当方デザインできないので見づらいのはご愛嬌。 とりあえず自分が投稿した日記にトラバやブクマがついたらわかるようになってます。 現時点で申請後にいくつか修正したので、バージョン1.1を申請してます。 できればバージョンを見て1.1であることを確認してからいれてください。 仕様は下記のような感じ はてなIDを登録 5分おきに自分の投稿ページをスクレイピングして各記事のトラックバック数とブクマ数取得（Chromeで増田にログインしている前提）収集したトラバ数/ブクマ数はそれぞれ保存しておくトラバ・ブクマが0以上かつ以前保存されている数より大きい場合はバッジカウント追加ページャーも処理する記事が1ヵ月以上前の場合は無視ポップアッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なんとパスワードも。ChromeとEdge、スペルチェック時に入力データが外部送信される仕組みに注意【やじうまWatch】
ひよこフィルター
同期しているGoogle ChromeのデータをGoogleから完全に削除する方法 | ライフハッカー・ジャパン