ChatGPTを神の道具にするChrome拡張機能4選
いろいろと便利に使えると話題のChatGPTですが、基本OpenAIのウェブサイトから使う仕様なのに機能が少なくて使いやすいとは言えなかったりします。 この記事ではそんなChatGPTの弱点を改善するChrome拡張を紹介します。 Glarity-Summary for Google/YouTube (ChatGPT)Glarity-Summary for Google/YouTube (ChatGPT)は、ChatGPTを用いてさまざまなサイト上で要約をしてくれるChrome拡張です。 右側に検索ワードに対する要約を出してくれるGoogle検索ではこのように右側に要約欄が現れ、検索ワードに対する要約を出力してくれます。 YouTubeでも右側に要約欄が出現、その下には書き起こし欄もYouTubeにも対応しており、動画の要約と音声の書き起こしを行なってくれます。 ｢とりあえずChatGPT
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
URLについてくる不要なパラメーターを消してくれる拡張機能「ClearURLs」レビュー
検索結果やSNSに張られたリンクをクリックすると、本来のURLの後ろに何やらパラメーターがいろいろとくっついてくることがあります。これは、どういったリンクをクリックしたのかなどの情報を得るために付与されたもので、なくても機能します。「あって困る」というものでもありませんが、「プライバシーを守るために消せるものなら消したい」という人のために役立つのが拡張機能「ClearURLs」です。 ClearURLs https://docs.clearurls.xyz/latest/ 「ClearURLs」はChrome、Firefox、Edge向けが提供されています。 ClearURLs - Chrome ウェブストア https://chrome.google.com/webstore/detail/clearurls/lckanjgmijmafbedllaakclkaicjfmnk ClearU
Personal Blocklist の代替になりそうな Chrome 拡張機能を作ってみた - Qiita
(2022/08/11 追記) uBlacklist の使い方に関する情報はやや古くなっています。最新の使い方を知るには、ウェブサイトを参照してください。 基本的な使い方 | uBlacklist uBlacklist Google の検索結果から指定したサイトをブロックする拡張機能を作ってみました。Personal Blocklist (by Google) の代替になるかもしれません。 Chrome 版 https://chrome.google.com/webstore/detail/ublacklist/pncfbmialoiaghdehhbnbhkkgmjanfhe?hl=ja Firefox 版 (Android でも一部制限はありますが動作します) https://addons.mozilla.org/ja/firefox/addon/ublacklist/ GitHub h
Chrome DevToolsを用いたメルカリWebのパフォーマンス計測 - Mercari Engineering Blog
フロントエンドチームの @urahiroshi です。Mercari Advent Calendar 2018 12日目を担当します。 今年の8月から12月にかけて，メルカリ・メルペイのフロントエンドチーム有志で「超速！Webページ速度改善ガイド」の社内輪読会を行いました。 この本の中で，「推測するな，計測せよ」という言葉が紹介されていますが，今回の記事は，輪読会で学んだことのまとめとして，Chrome DevToolsを用いてメルカリWebのパフォーマンス計測と簡単な分析を行ったものです。 なお，現在メルカリWebのアーキテクチャを刷新するための開発が進んでいるため，ここで計測したパフォーマンスの値は大幅に変化していく可能性が高いです。アーキテクチャの刷新後に振り返って見られる楽しみが増えることも、この記事を書いた目的の一つです。 計測方法，環境 計測はGoogle Chrome 71.
開発体験を変える! 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 を入力することで取得で
Chromeのウザいショートカットを対策しよう - Qiita
はじめに Macでの利用を想定しています。 ※Winの場合は、CommandをControlに置き換えてもらえば済むと思います。 こんなグヌヌありませんか？ Chromeを使っているときにこんなとグヌヌありませんか？ GoogleChromeを終了 「今見ているタブを消そうと思った」 「タブが増えてきたので見てないタブを消そうと思った」 <(｀･ω･´) Command/Control + W で消そうかな (´・ω・｀) Command/Control + Q 押してChromeごと終了してしまった… 新しいタブを開こうと思ったらページ更新してしまう 「Form入力中だけど調べごとがしたい」 <(｀･ω･´) Command/Control + T でタブを開くぞー (´・ω・｀) Command/Contorl + R で書きかけのデータがリロードされてしまった… まあ、今時のWebサ
スクリーンショットを撮るのは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」をチ
ZenHubとは - Qiita
2015/12/03追記：待望のFirefox対応をしました！今日現在は、 https://www.zenhub.io/firefox からアドオンをインストールすることができます！ また、Firefox版の公開を記念して、初月割引や、ZenHubグッズ（！）がもらえるプロモーションコードがあるので、ZenHubを使ってみようか迷っていた方は、プロモーションコードを利用するとお得に始めることができます。 ZenHub公式ブログの記事はこちら https://www.zenhub.io/blog/firefox-fans-can-now-use-zenhub-with-their-favourite-browser/ 2015/07/01追記：このエントリー中のスクリーンショットは、古いバージョンのZenHubのものです。追記時点での最新の機能についてはZenHub2.0についてを参照してく
Headless ChromeをDocker上で動かして、E2Eのテスト - Qiita
この記事はGunosy Advent Calendar 2017の14日目の記事です。 昨日は@harahenikuさんのGoを遅くしないための地味な話でした。 広告技術部の@hoshitocatです。 主な業務はRailsで広告の入稿やレポートのための管理画面の開発をしております。たまにGoで配信側のAPIを触ることがあります。 今回は管理画面でChromeのHeadlessモードを使ったE2Eのテストを導入した話をします。 PhantomJSからChromeへ 私たちはこれまでE2EのテストをPhantomJSを使っていました。 しかし、Javascriptの動作も含めたテストを書いている際に、includes()がPhantomJSだと動作しないことがわかりました。 プロダクトコードをテストコードに合わせて書き直すことも考えましたが、それでは新しく使えるようになった便利な機能をいつま
Herokuを使ってchromeでwebページのスクリーンショットをとる - Qiita
コードの流れは、chromeの設定をしてsessionを作成、sessionでurlを指定してwebページを訪れ、そこでスクショをとります。 session.visit後に少し待たないとchromeが画面をrenderする前のスクショがとれる場合があるのでまっています。 require 'capybara' require 'selenium-webdriver' base_args = %w{headless no-sandbox disable-gpu} chrome_bin = "/app/.apt/usr/bin/google-chrome" chrome_opts = chrome_bin ? { "chromeOptions" => { "binary" => chrome_bin, 'args' => base_args } } : {} Capybara.register_
ChromeのHeadlessモードを試す
ごきげんよう、じんぐうじです。 今回は一部で話題になっているGoogleChromeのheadlessモードを試してみます。 headlessモードというのは端的にいうとGUIでは無くCUIで動作させることです。 これを使うとデスクトップ環境が無いサーバ等でChromeが動かせるようになるので、 ブラウザを使ったテストがしやすくなります！わーい！すごーい！ ひとまず入れてみようと思った ということで今回はubuntu環境で動かしてみます。 まずはchromeのリポジトリを追加します。 $ echo 'deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main' > /etc/apt/sources.list.d/google.list $ wget -O - https://dl.google.com/linux/
centos7 + headless chromeでスクレイピング - notebook
chromeをスクレイピングで使う必要があったので開発環境から作ってみたときのメモ 特にメモすら必要ないかもしれないくらい環境整ってるなと感じました google chrome install yum install https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm これで一発 試してみる [root@localhost ~]# google-chrome --headless --screenshot --window-size=1024,2000 --hide-scrollbars http://swfz.hatenablog.com/ [1026/040341.372041:ERROR:zygote_host_impl_linux.cc(88)] Running as root wit
Dockerで日本語対応のHeadless Chrome + puppeteerを立ち上げ
docker-composeで日本語対応のHeadless Chromeを「puppeteer」で操作する手順です。 🐡 Dockerfile日本語対応のChromeの入ったDockerfileは次のように記述します。 FROM ubuntu:latest MAINTAINER morizyun <@zyunnosuke> # For Japan RUN sed -i -E "s@http://(archive|security)\.ubuntu\.com/ubuntu/@http://ftp.jaist.ac.jp/pub/Linux/ubuntu/@g" /etc/apt/sources.list # Basic RUN apt-get update \ && apt-get install -y sudo curl wget zip unzip git nodejs npm fon
Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary) - Qiita
経緯 もともとMouseoverDictionaryという素晴らしいFirefox用辞書があったのですが、Quantumの登場とXULの廃止とともに使えなくなってしまったため、自分用にChrome拡張をつくった次第です。 ソースコード 実装に関わる技術寄りの用語: React, esbuild, chrome.storage.local, chrome.storage.sync, Cross-extension messaging, Hogan, debounce, resizable/draggable, intl.v8BreakIterator, deinja, クロスブラウザ, など。 ※詳細は「Mouse Dictionaryの技術的な話」をご参照ください https://qiita.com/wtetsu/items/2a5568cb0b5a38c003fb 使い方 インストール
文書校正ツール textlint の Chrome 拡張を作った - もなでぃっく
以前、プラグインで拡張可能な文章校正ツール textlint で小説の作法を検証するための規則を作ったのですが、textlint はコマンドラインツールであるために利用するまでのハードルが高い状況でした。 Sublime Text や Atom などのプログラマ向けエディタを利用していれば、textlint のプラグインが使えたりするのですが、今回はより簡単に利用できるように Chrome の拡張機能として textlint をブラウザ上で使えるようにしてみました。 インストールはこちら: 【Chrome ウェブストア】 textlint: 文章チェッカー インストールすると、ページ内の編集領域で文章入力中にリアルタイムで校正してくれるようになります。（もちろん ON/OFF できます） textlint に最近追加された自動修正機能にも対応しているので、ボタン一発で自動で修正されたりしま
Getting Started with Headless Chrome | Blog | Chrome for Developers
TL;DR Headless Chrome is shipping in Chrome 59. It's a way to run the Chrome browser in a headless environment. Essentially, running Chrome without chrome! It brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line. Why is that useful? A headless browser is a great tool for automated testing and server environments where you don't need a visi
フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方 - Qiita
はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショートカットの一覧 キーボードで出来ることはなるべくキーボードでやるけれども、マウスやトラックパッドでやったほうが速い場合は臨機応変に切替えることを心がけています。 Chrome Canaryを使う Chromeの開発者向けプレビュー版 Chrome Cana
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
外部に公開しないミニマムなchrome拡張機能を作るのは1時間も使わずにできる - Qiita
Postman | API Development Environment
