React, TypescriptでChrome Extensionを開発する(ホットリロード対応) - ハイパーマッスルエンジニア
死ぬほど参考にさせていただいたサイト 基本的には下記のサイトを参考に進めればいけます。(最高の記事ありがとうございます、大感謝祭) code-log.hatenablog.com 本記事では上記で紹介されていたホットリロードがエラーで動かなかったため、別の方法でホットリロードできたので紹介したい。 環境 typescript 4.3.2 webpack 5.38.1 node 15.13.0 yarn 1.22.10 最終形 先に最終形を載せておく。 github.com content_scriptsのみ対応としたため、かなりミニマムになっている。 ディレクトリ構造 . ├── dist │ ├── background.js │ ├── main.js │ └── manifest.json ├── manifest.json ├── package.json ├── sr
Node.jsとPuppeteerでChromeを自動操縦する 🌴 officeの杜 🥥
ウェブブラウザを用いたウェブアプリケーションの自動操作は、昔と違って妙に需要があります。これまでのローカルアプリケーションの操作は、VBAなどがDLLを介して行う事ができました。ウェブブラウザの場合、Selenuim Basicを使って操作することも可能です。 一方で現代の多くのウェブアプリケーションはREST APIを装備しているので、人間が操作するような操作方法を持ってして、作業を再現するような事も不要になりつつありますが、コードの記述を必要とするため、RPAなどを用いて作ってるのが現状です。 今回、GoogleのChromeチーム謹製のChromeを操作するNode.jsライブラリ「Puppeteer」を用いて、ブラウザ操作の自動化と、ついでに単独実行ファイル化をやってみたいと思います。 ※Microsoft Playwrightと呼ばれるPuppeteerフォークがあり、こちらはS
拡張間連携とEvent Driven JavaScript - Constellation Scorpius
Chrome拡張間連携拡張間で連携できるAPIがある 受信側 chrome.extension.onConnectExternal chrome.extension.onRequestExternal 送信側 chrome.extension.sendRequest chrome.extension.connect Background間の連携background page同士で連携ができる. => 夢が広がる ChromeMigemoid:edvakf さんChromeKeyConfigid:os0x さん用意しなくてもmigemoできる. Key用EventListenerをいくつも引っ掛けるのは無駄
extension内のパーツやextension間で通信するためのAPI - 心魅 - cocoromi -
extensionには様々なパーツがありますが。 それぞれのパーツ間でメッセージングを行うAPIが用意されています。 Message Passing http://code.google.com/chrome/extensions/messaging.html Communication between extensions and their content scripts works by using message passing. Either side can listen for messages sent from the other end, and respond on the same channel. A message can contain any valid JSON object (null, boolean, number, string, array, o
Google、Android用ChromeにWEBサイトをアプリとして利用可能にする「WebAPK」を実装開始 | juggly.cn
Google が Android 用の Chrome Dev と Chrome Canary に WEB アプリを通常の Android アプリのように利用できる「WebAPK」の実装を開始しました。 WebAPK は Chrome 47 以降がサポートしている「Progressive Web App（PWA）」を Android アプリのパッケージ形式である APK に変換して端末にインストールする仕組みです。これにより、WEB アプリを通常の Android アプリと同等に利用できるようになります。 PWA では、WEB アプリを Chrome カスタムタブなどの Chrome 標準機能を利用して表示しますが、一般の WEB サイトとは違い、スプラッシュスクリーンやプッシュ通知をサポートしており、Android のアプリドロワーやアプリ履歴画面には WEB アプリ名が表示されます。WE
ブラウザ拡張の権限でどこまで悪いことをできるのか？とその対策【デモあり】 - Qiita
[2018/07/07 追記] 本記事ではChrome拡張について説明していますが、Firefox1やEdgeの拡張機能もほぼ同じ仕組みで動いています。 [2023/11/06 追記] #参考 ページを追加しました。 Chrome拡張。便利な機能を簡単に追加できるので使っている人も多いと思います。 ただ、インストール時の権限の注意書きが分かり難いので無条件に承認（追加）していることもあるのではないかと思われます。 そこで、本記事ではChrome拡張の権限の種類・確認方法の他、拡張がどこまで（悪いことを）できるのかとその対策を3段階の権限（危険性）レベルごとに紹介していきたいと思います。 便利だが危険性もあるChrome拡張 Chrome拡張をインストールすると、Webページを読むというブラウザ本来の機能だけでなく様々なことができるようになります。 例えば、Webメールの新着通知や記事などの
Chrome Extensionでユニットテストしてみる #TddAdventJp - くりにっき
これは TDD Advent Calendar 2013 の24日目です。 23日目 @quicy さんの レガシースタイル: JnarioでJavaのTDD でした 24日目 : Chrome Extensionでユニットテストしてみる Chrome Gitlab Notifier でユニットテストをしてみたので共有です 何をテストするのか？ 人によって粒度は違うと思いますが、自分の場合普段のウェブアプリの開発だと Model : 割と書く 不安なところは全部テストを書く View : 書かない デザイン崩れや使いやすいかどうかは目で見ないと分からないため自動化できない 社内ツールを作ることが多いので、画面は適当でいい 分単位で変わる仕様に対してユニットテストを書くのは無駄 Controller : 多少書く GETやPOST叩いた時にエラーが起きないこと（最低限のハッピーパスの担保）
Chrome Extension の CI が出来るようになるまで(導入編) · けんごのお屋敷
個人的に趣味で Chrome Extension の開発をしていますが、最近いろいろとノウハウも溜まってきたので Chrome Extension の CI について少しまとめてみようと思います。 目次 はじめに Chrome Extension のテストを書く 何をテストするのか テストフレームワーク Jasmine のインストール Jasmine でテストを書いてみる JavaScript APIs をモックする HTML Fixture を読み込む Chrome Extension のテストを実行する テストランナー Karma Karma のインストール Karma でテストを実行する ファイルの変更を監視する コードカバレッジを出力する HTML Fixture を読み込む Chrome Extension を CI する CI サービス Wercker Wercker にリポジ
Chrome Extension で content_scripts から clipboard を使う - Qiita
Chrome Extension を作っていて、content_scripts からテキストをクリップボードに保存する方法を調べるのに時間がかかったのでメモ 制約とか clipboard にコピーするためには、permissions: ["clipboardRead"] が必要 clipboard にコピーするためには、document.execCommand('copy')を Event Page で実行する必要がある document.execCommand('copy') は textarea など特定のエレメントのみしかコピー出来ない これらの決まり事を守って実装 コード例 この例では、 1. コピーするテキストをメッセージとしてコンテントスクリプトから Event Page に送信 2. Event Page 側のリスナーで受信した時に、copy 用のフォームを作成 3. doc
Amazonでの賢い買い物をするにはChromeの拡張「Keepa – Amazon Price Tracker」が必須｜More Access! More Fun
先日こういうエントリーを書きましたら・・・ Amazonで一番まずいのは溢れる二重価格の表示だと思う 二重価格改善して欲しいですが自己防衛としてChromeの拡張機能「Keepa – Amazon Price Tracker」を使用してます。 価格の履歴が見れ安いのか高いのかすぐ確認取れます。https://t.co/NR7v8Q2QS2 https://t.co/vLTNmwipIG — なお (@naoh__i) 2016年10月16日 というアドバイスを頂きました。 さっそくChromeブラウザにインストールして使ったところ・・・ Amazonの買い物はこれなしではあり得ない!! という結論に達しましたので、ここでご紹介します。マジで使えます!!! 教えてくれてどうもありがとうございます。 使い方は簡単・・・ これをモバイルで見ている方は、PCを開いてください。 GoogleのChr
Chromeを拡張するおすすめExtensions8選「AutoPatchWork」「Streamus」など | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ディレクターのモトキです。 みなさんは普段なんのブラウザを使っていますか？ 僕は過去にNetscapeとOpera、Safari、Firefoxなど、この辺りを使ってきて、いまはGoogle Chromeを使っています。 Chromeを使う理由には、動作が軽い、iPhoneのChromeとの連携が便利、そして拡張機能の豊富さと使いやすさがあげられると思います。 ちなみに、LIGブログ閲覧者ではPCブラウザだとChromeがトップです。依然IEのシェア率が高い日本ですが、Web制作関係者はChromeユーザ多いですね。 今回はそんなGoogle Chromeで、僕が使っている拡張機能をご紹介したいと思います。 Chromeブラウザを拡張するおすすめExtensions8選 https://chrome.google.com/webstore/detail/streamus/jbn
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to get event page from content script?
Amazon.com: :