CRXJS Vite Pluginを使って爆速でChrome拡張機能を作るチュートリアル(V3対応) | DevelopersIO
CRXJS Vite Pluginを使ってChrome拡張機能を作る方法を紹介します。初心者向けの入門記事です。 どうも。 えーたん（@eetann092）です。 先日社内LTに登壇しました。 タイトルは「Chrome拡張機能の開発がやめられねぇ」です。 今回はその発表内容を一部抜粋し、CRXJS Vite Pluginを使ったChrome拡張機能の作り方をチュートリアル形式で紹介します。 完成形を見る このチュートリアルでは、「ユーザーが入力した文字列と一致するハッシュタグ」がブックマーク名にある時に、まとめてタブとして開く拡張機能を作ります。 たとえば、以下のようなブックマークがあるとします。 ブックマーク名として、ハッシュタグ#morning, #zennなどが含まれています。 ここで、ブラウザの右上にある拡張機能のアイコンをクリックすると、入力欄が開きます。 ユーザーが入力欄にmo
【Chrome】textareaの改行時にカーソル位置がガタっとずれる問題の対処法
Enterキーを押すとtextareaのスクロール位置がずれる問題 ふとZennのスクラップのエディターで、Enterキーを押すと、カーソルのあたっている部分のスクロール位置がガタっとずれる問題が発生することに気づきました。 Enterキーを押したタイミングでカーソルの位置がviewportの先頭もしくは末尾にジャンプするようなイメージです。 もう少し調べてみると、Chromeでは問題が発生するものの、FirefoxやSafariでは問題が再現できませんでした。 とりあえずautosize textareaを疑う スクラップのエディターではtextareaの高さがテキストの長さに応じて変わるreact-textarea-autosizeを使っています。最初はこのパッケージを疑ったのですが、HTMLの<textarea>タグに書き換えても問題は解消しませんでした。 Reactのcursor
ブラウザにおけるメモリリークを解決するために読んでおけると良い資料 - mizdra's blog
最近趣味や仕事の Web アプリケーションでメモリリークに遭遇して、頑張ってメモリリークの原因を突き止めて修正する、ということがあった。その過程でメモリリークについて色々調べて知見が溜まったので、学習資料の紹介という形でアウトプットしてみる *1。 前置き 紹介する記事がかなり偏っていることに注意 冒頭で触れたメモリリークを解決するために読んだ記事をまとめただけなので、内容にそれなりの偏りがある 例えば id:mizdra が遭遇したメモリリークは全てブラウザ上で発生していたものだったので、これから紹介する内容も主にブラウザにおけるメモリリークに焦点を当てたものになる GC がどうメモリをどう解放しているか、何故メモリリークが発生するのかは全てカット 調べれば色々な記事が出てくるので、必要に応じて読んでください 基本的な知識を抑える まずメモリリークとメモリ撹拌の違いを学ぼう どちらも同じ
今さら聞けないChromeエクステンションの作り方 - はらへり日記
この記事は JavaScriptアドベントカレンダーの1日目の記事です。 qiita.com JavaScriptというよりはChromeの話かもしれませんが、最近エクステンションを作って楽しかったので簡単に作り方を書いてみます。 Chromeエクステンションとは github-label-creater 私は普段、GitHubで開発するときにIssueのラベルを自分好みに変えてから使うのですが、 毎回作り直すのが面倒でブックマークレットを作ろうとしました。 ただ、ブックマークレットだとソースコードの量が限られてしまうので、Chromeエクステンションにしようと思い立ち、github-label-createrなるエクステンションを作成しました。 github.com こんな感じで使えます。 エクステンションの種類 一言でエクステンションと言っても、いくつか種類があります。 とてもざっくり
Chrome Extension 開発メモ 1 - ミノタケ日記。
ドットインストールのChrome Extensionの項目に目を通す。 Google Chrome拡張機能入門 (全20回) - プログラミングならドットインストール Content Script内でChrome.tabs は使えない 参考 linux - chrome.tabs.getSelected is undefined on latest chrome that uses manifest version 2? - Stack Overflow なので、sendMessageでbackgroundに送ってそこで処理する感じ Port error: Could not establish connection. Receiving end does not exist が出る 参考 Chrome Extension Port error: Could not establish c
ヘッドレス Chrome スタートガイド | Blog | Chrome for Developers
要約 ヘッドレス Chrome は Chrome 59 でリリースされます。Chrome ブラウザをヘッドレス環境で実行する方法です。基本的には Chrome を使わずに Chrome を実行しますこれにより、Chromium と Blink レンダリング エンジンが提供する最新のウェブ プラットフォーム機能がすべてコマンドラインに組み込まれます。 なぜこれが有用なのでしょうか ヘッドレス ブラウザは、UI シェルを表示する必要のない自動テストやサーバー環境に最適なツールです。たとえば、実際のウェブページに対してテストを実行したり、そのウェブページを PDF 化したりできます。また、ブラウザが URL をどのようにレンダリングするかを検査することもできます。 Headless（CLI）の起動 ヘッドレス モードを開始する最も簡単な方法は、コマンドラインから Chrome バイナリを開くこと
Dev Tips - Developer Tips by Umar Hansa
Sign up to receive a developer tip, in the form of a gif, in your inbox each week
Optimise your web development workflow 2016
Chrome DevTools Optimise your Web Development Workflow Originally given at ffconf 2016, watch the talk here Umar Hansa / @umaar You might also like these slides on browser automation in JavaScript About Me Current A few things I like... People leave on time Hack days are not just fixing technical debt Open Source github.com/springernature github.com/springernature/frontend DevTools Tips A develope
Chromeのオリジナル拡張機能を開発しよう（ソースコードあり） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Chromeの拡張機能とは？ Chromeの拡張機能は実質的にはただの圧縮したフォルダです。そして、そのフォルダの中身もただのHTMLやCSS、JSファイルです。 つまり、拡張機能の作り方はWebページのそれとは大差ないということですね。 拡張機能にしか提供されていない豊富なChromeのネイティブのAPI群（Chrome.* API）を利用できるところが拡張の魅力です！ 一般公開目的ではなく、普段の業務効率化目的でも十分な利用価値があると思うので、まだの方はぜひ一度触ってみてください。 拡張機能の種類 拡張機能の種類は大きく分けて3つあります。 Browser actions Page actions Override Pages 1つずつ見ていきましょう。 Browser actions ツールバーの右側に小さなアイコンを表示させるタイプの拡張機能です。一番頻繁に見かけるのがこのタイプ
Chromeデベロッパーツール拡張の話 - logiqboard
艦これ向けChrome Extension 「艦これインスペクタ」を作りました - logiqboard の続き 艦これインスペクタを作る際に、devtools拡張の日本語情報がなくて結構苦労したので、調べたことをまとめておきます。元ドキュメントを読む際の理解の助けになれば幸いです。 実装例として feiz / kancolle_inspector / source / — Bitbucket も参照するとよいと思います。 基本的なこと Chrome extensionにはデベロッパーツールを拡張するためのAPI chrome.devtools.* が用意されています。 Extending DevTools - Google Chrome デベロッパーツールにパネル（タブ？）を追加したり、インスペクト対象のウィンドウにcontent scriptを送り込んだり、webRequestでは取れ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
電子情報学特論：Chromiumのアーキテクチャを解き明かす
デベロッパーツールがさらに便利に！Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載
https://developers.google.com/web/tools/setup/workspace/setup-devtools