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
フロントエンド刷新のために DevTools を作って開発を捗らせる - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの麦島(@mugi_uno)です！ 2021年5月に新しくメンバーとして加わり、富山からフルリモートで働いています。 最近はチームメンバーに誕生日を祝ってもらって嬉しかったです🎉 さて、以前に "kintoneのフロントエンド刷新に向けた取り組み"*1 というエントリでもご紹介しましたが、現在サイボウズ社内では kintone で利用するフロントエンドの技術スタックを刷新する取り組みを進めています。 その一環として、 "Closure Tools DevTools" という Google Chrome 向け拡張機能を作成しました。 作成した DevTools は kintone に限らず利用することができるため、Chrome ウェブストアで公開しています。 chrome.google.com ソースコードも次のリポジトリでご確認いただけます。
chrome devtools の tips N連発 - mizdra
mizdra.icon が社内向けに発表した資料なのですが、折角なので一般向けに書き直して公開します。
Chrome OS 10周年 - Nothing ventured, nothing gained.
子供たちが僕たちが作ったChromebook (ChromeOS) でプログラミングを学んでいる (Codemonkey)。涙が出そうになった。 #STEAM前原小 pic.twitter.com/uhqUvpgSDT — 及川卓也 / Takuya Oikawa (@takoratta) November 26, 2016 Chrome OSが10周年を迎えたようだ。おめでとう。 Chromebook turns 10 東京にChromeチームが立ち上がりかけていた頃、将来計画などを説明に来ていた本社マウンテンビューのディレクターからOSを作ることを考えているという話を聞いた。Webに最適化されたOSが必要だと熱く語ったそのディレクターは東京のChromeチームの設立の支援者でもあり、東京にもそのOS開発チームを作りたいと言っていた。六本木ヒルズ近くの居酒屋だったと思う。2009年の頃だ
Automatically record puppeteer tests - Chrome DevTools - Dev Tips
Chrome DevTools: Record tests with the puppeteer recorder Last updated: 25th November 2020 Introduction The Puppeteer Recorder feature in Chrome DevTools can monitor your webpage interactions and generate the code to automate a browser. For example, if you click on an element and type an email address into an email field, the recorder can generate the following code: await page.click("aria/Login")
ノーコードでWebページをスクレイプできるChrome拡張「AnyPicker」
◆ AnyPicker https://anypicker.ryang-studio.com/ 紹介 「AnyPicker」は、ノーコードでWebページをスクレイプできるChrome拡張ツールです。 Chrome拡張機能をインストール後、スクレイプするWebサイトを開くとこのようなサイドバーが出現します。 STEPは全部で5つあり、その1つ目がこちら。今回は初めての登録なので「New recipe」を選択します。 続いてSTEP2、ここで実際にスクレイプするコンポーネントを登録していきます。 取得対象にカーソルを合わせてクリックすると フィールドとバリューが取得できます。 同じ要領で、ピックアップ全部のタイトルを選択しました。 なお、フィールド値は自由に設定可能。後にアウトプットデータのKey値になるので、取得しやすい英単語が好ましいでしょう。 続いてSTEP3は、リンク元を取得＆サジェス
--headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer について - Qiita
--headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer についてJavaScriptChromee2e puppeteer はHeadless Chrome をNode.jsで操作しやすくしたライブラリです。今日(※ 2017/8/17)一日で凄い勢いでGitHubのトレンド入りしており、TLでも話題になっていたので、早速触ってみました。 Node.jsでChromeを操作するというコンテキストにおいては、Nightmare.jsと同じレイヤに属するプロダクトですね。Nightmare.jsはElectronを介在させることで、Chromeの操作を実現していましたが、今年の5月にChromeでheadlessモードが利用可能になって以降1、headless Chromeを直接操作するライブラリが色々と出始めていますね。この系統は、chr
Headless Chromeでデザイン変更履歴を追える魚拓を作ってみた - pixiv inside
はじめに こんにちは、普段はPawooの開発を担当している新卒エンジニアのabcangです。 最近話題のHeadless Chromeを使って魚拓を作ってみましたので、その話をします。 結論から言うと、こういうものができました。 以下、詳しくお話していきます。 日々行われるデザイン変更をどう把握するか pixivには毎日新機能やUIの変更がデプロイされており、どんどんページが変わっていきます。 ある日、ディレクターから「デザインの変更履歴を追うための魚拓ツールがほしい」と相談されました。魚拓ツールがあると、なにか数値の変動があったときにデザインの崩れを確認したり、過去のデザインを振り返ったりするときに便利とのことです。 ちょうどそのタイミングでHeadless Chromeが利用できるGoogle Chrome 59がリリースされていたので、試すいい機会だと思い引き受けました。 Headl
スクリーンショットを撮るのはChromeがいちばん?! | DevelopersIO
新しい職場、新しいパソコン。まず始めに入れるツールの一つがスクリーンショットではないでしょうか。 でも、Chromeのver.59からは、標準機能として装備されたようなのです。 やりかた ChromeのDevelopers Toolを立ち上げる。 Macだと、Chromeを開き「alt + command + i」を同時に押す。 レスポンシブ表示にする 続いて、command + shift + m を押します。または、下記のボタンを押してください。 画面上部に、解像度やデバイスを変更するセレクトボックスが表示されます。 デバイスの選択肢を増やす 必要最低限はありますが、PCのスクリーンショットも取れるようにしたいので、Editを押します。 デベロッパーツールの表示が切り替わるので、「Laptop with HiDPI Screen」と「Laptop with MDPI Screen」をチ
2016年度版 僕が考えたChrome拡張機能を作るときのデザインパターン - Qiita
4年近く前の2012年に僕が考えたChrome拡張機能を作るときのデザインパターンというエントリを書きました。最近参加したイベントで「よういちろうさんの拡張機能の記事見て作ってみました〜」と声をかけてくれた人がいて嬉しかったのですが、2012年のそのエントリは、すでに内容が古くなってしまっています。最近の状況を踏まえて、内容を新しくした「2016年度版」を書いてみようと思います。 変更しようと思った点は、以下です。 prototype.jsは使わず、ECMAScript 2015で書く。 Background Page(常駐型)ではなく、Event Page(非常駐型)にする。 そもそも最初のコードセットは自分で書かない。 本文やコード的には、2012年度版をコピペしています。 （この投稿の内容は、自分のブログエントリと同じです。） 前にいくつかのChrome拡張機能を作っていて、すでに数
Chrome ですぐに使える思考整理に便利なマインドマップアプリ - ヒトリジョーシス 原宿ベース
2016 - 05 - 13 Chrome ですぐに使える思考整理に便利なマインドマップアプリ Web Chrome こんにちは！最近本当に暑いですね！もう暑すぎるので今すぐビアガーデンにでも行きたいですね。 ビアマウント とか最高です。高い山に登ることは好きなのですが高いところ自体は高所恐怖症で苦手な妄想スカイダイバーのナカムラ ( @sys_nakamura ) です。熱気ムンムンの屋外でビールを美味しく飲んだあとに締めとして家系ラーメンでも食べたいですね。家系ラーメンのネタはストックがあるのですが、とりあえず今回もラーメンのことではなく IT っぽい記事を書こうと思います。 マインドマップ マインドマップが簡単に描ける Chrome アプリ Chrome アプリとは Chrome アプリ - MindMup 使い方 アプリの起動 中心にテーマを書く 連想される関連した情報を結ぶ (小
WEBサイトへの再訪問を促せる「プッシュ通知」は独自アプリがなくても送れるぞ！
2015年の春頃にChromeが「プッシュ通知」に対応したことで、WEBサイトから「プッシュ通知」を送れるWEBサービスも増えてきましたね。 「プッシュ通知」といえば、スマホアプリをイメージしますが、これからはもっと広く「プッシュ通知」が使われるかもしれません。 プッシュ通知とは スマートフォンを使っている方なら、アプリから最新ニュースの通知が届いていることと思います。Facebookでもメッセージが届いたりすると通知が来ますよね。 Macを使っている方ならカレンダーアプリやメールアプリなどからの「通知」が表示されているかと思います。 このような「プッシュ通知」は、基本的にそのデバイス（スマホやPCなど）にインストールしたアプリを経由して届きます。ですので、FacebookアプリがインストールされていないスマホにはFacebookからの通知は当然届きません。 これまでECサイトやWEBメデ
ウェブにプッシュ通知をもたらすウェブサービス「bpush」を作った - Qiita
2017年3月26日追記 bpushは2年弱の運営の後、OSSとして生まれ変わりました。詳しくは下記の記事をご覧ください。 国内初のウェブプッシュサービスbpushのOSS化と運営して学んだことについて ブラウザだけでプッシュ通知ができるようになった Chromeのバージョン42からプッシュ通知が可能になったという記事は読まれましたでしょうか？ 「Google Chrome 42」安定版リリース プッシュ通知機能追加と45件の脆弱性対 Chrome 42から、Service Workerという新しい仕組みによって、ブラウザを閉じていても、スマートフォンのプッシュ通知のようにサービス側からお知らせを届けることができるようになりました。この機能はデスクトップ版とAndroid版のChromeに導入されています。通知の仕組みにGoogle Cloud Messaging(GCM)を使っているため
uBlock·快適なブラウジングを。オープンソースのアドブロッカー MOONGIFT
Webブラウザで広告を非表示にするライブラリとしてAdBlockが知られていますが、契約した企業の広告は表示するなどとあまり良い噂を聞かなくなっています。また、アドブロックを入れると表示速度が速くなるはずが、AdBlockは遅くなるとさえ言われています。 そこで作られはじめたのがuBlockです。オープンソースでシンプルなアドブロッカーです。 uBlockの使い方 uBlockはChrome ウェブストアで配信されています。 入れる前。 入れた後。すっきり！ uBlockはAdSenseはもちろん、MOONGIFTの独自の仕組みであるサイドバー部分においても非表示にしてくれるなど独自の広告判定エンジンがあるようです。uBlockを入れておくと表示が高速化されたり、不用意なトラッキングを防げるなど、Webブラウジングが快適になるのではないでしょうか。 uBlockはGoogle Chrome
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Rasukarusan/fzf-chrome-active-tab: :penguin: Fuzzy search and activate Chrome tab via the terminal.
GitHub - microsoft/playwright: Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
GitHub - wingleung/save-page-state: A chrome extension to save the state of a page for further analysis
GitHub - GoogleChrome/rendertron: A Headless Chrome rendering solution
GitHub - puppeteer/puppeteer: Node.js API for Chrome
GitHub - chromedp/chromedp: A faster, simpler way to drive browsers supporting the Chrome DevTools Protocol.
