js を書いて URL やページの内容を加工してコピーできる Chrome 拡張ココピーのご紹介 - ぽ靴な缶
この記事は はてなエンジニア Advent Calendar 2020 - Qiita の23日目の記事です。 qiita.com 昨日は id:Krouton さんの 30日でできる! OS自作入門 を読むために nasm_of_nask というコンパイラを作った話 - KRAZY感情STYLE でした。よかったですね。 コードでコピーするココピーです 今日はちょっと前に作ったブラウザ拡張、cocopy を紹介します。 chrome.google.com しゅぴっと拡張を開いてコピーするフォーマットを選択できます。 このアニメーションはコピー機がブーンとスキャンする感じをイメージしています。 利用者が js を書いてフォーマットを追加できます。 コードからは URL、タイトル、選択中のテキスト、ページの HTML にアクセスできます。 Markdown, Scrapbox HTML, は
Lighthouse の概要 | Chrome for Developers
Lighthouse は、ウェブページの品質を改善するためのオープンソースの自動化ツールです。公開されているウェブページでも、認証が必要なウェブページでも実行できます。パフォーマンス、ユーザー補助、SEO などの監査を行うことができます。 Lighthouse は、Chrome DevTools、コマンドライン、または Node モジュールとして実行できます。Lighthouse に監査する URL を指定すると、ページに対して一連の監査が実行され、ページのパフォーマンスに関するレポートが生成されます。不合格となった監査は、ページを改善するための指標として使用します。各監査には、監査が重要な理由と修正方法を説明する参照が含まれています。 Lighthouse CI を使用して、サイトの回帰を防ぐこともできます。 使ってみる 最適な Lighthouse ワークフローを選択します。 Chro
退屈なブラウザ作業はSeleniumにやらせようーーはじめてでもできるブラウザ操作自動化 | メルカリエンジニアリング
こんにちは、メルカリのQA-SETチームで自動化をぶりぶりしている tadashi0713 です。 これまではモバイルアプリ・WebアプリのE2Eテストを中心に自動化をしていましたが、最近ではプロダクト部門・カスタマーサポート部門・コーポレート部門の業務自動化にも挑戦しています。 今回はSelenium WebDriver (以下 Selenium) を使って簡単にできるブラウザ作業自動化についてご紹介します。 10/25にGitHub JapanでLT発表した資料もありますので、合わせてご覧ください。 english-lt.connpass.com 意外と多い、ブラウザを使った繰り返し作業 社内の色々な職種・チームの方々とコミュニケーションをしていると、ブラウザを使った繰り返し作業が多く感じました。 例えば 社内で使用しているWebサービスのアカウントを社員に付与する Chartio(h
Chromeデベロッパーツールに独自機能を追加する6つのステップ | PLAID engineer blog
こんにちは、PLAIDのエンジニアの池上 a.k.a. gami(@jumpei_ikegami) です。 好きなブキは、「プロモデラーMG」です。 さて今回は、仕事で調査用の「Chrome拡張機能」を作ったので、「Chromeデベロッパーツール」に「独自ツール」を追加するための手順について紹介したいと思います。 Chromeデベロッパーツール、使っていますか？ 弊社では、「KARTE」というサービスを開発しています。 「KARTE」の主な機能として、サイトにJavaScriptのタグを埋め込んでもらい、サイト上からユーザーの行動履歴や属性情報を取得し、それに応じたコンテンツをサイト上に配信するというものがあります。 しかし、「KARTE」の「タグ」が正しく設置されていないと、ユーザーの情報が取得できず、コンテンツの配信が思ったようにできないことがあります。 そんなときは、「Chromeデ
Go + WebDriver でブラウザ操作を自動化する - Qiita
Go + WebDriver でブラウザ操作を自動化してみたメモ。 ライブラリは sclevine/agouti を使ってみました。 sclevine/agouti は、Selenium 公式が提供している Go のクライアントライブラリではない（まだそういったものは存在してなさそう）けど、Selenium Server 等さえインストールしておけば、うまいことよしなにしてくれる代物。 他の似たようなライブラリと比べてシンプルで分かりやすいように思いました。 下記、各ブラウザ毎のサンプルコード。 qiita.com にアクセスしてスクリーンショットを撮り保存する処理。 Firefox // main.go package main import ( "github.com/sclevine/agouti" "log" ) func main() { driver := agouti.Sel
chromeのHSTSキャッシュを削除する - cameong’s blog
http のリクエストが勝手にhttps にリダイレクトされる事案が発生しました。 状況としては↓な状況 beniyama.hatenablog.jp サーバ側は設定を変更・再起動でよいけど ブラウザに残ったHSTS キャッシュが消えないかぎり、https にリダイレクトされ続けます。 キャッシュ消えるまで待つとかつらすぎるので、chromeのHSTSキャッシュを削除します chromeのHSTSキャッシュを削除する方法 chrome://net-internals/#hsts をchrome のURLに入力し、移動する。 Delete domain の箇所に削除したいドメインを入力します。 Delete ボタンをクリックします。 gyazo.com 終
Using headless Chrome as an automated screenshot tool
Update 9/12/2017–Some of the techniques in this post may be out of date, consider checking out Puppeteer from the Chrome team, which offers an awesome API for screenshots with headless Chrome. Starting with Chrome 57, we can run Chrome as a headless browser on linux servers. Capturing web page screenshots is a common use case for browser automation, and PhantomJS has always been my go-to solution
ヘッドレス Chrome スタートガイド | Blog | Chrome for Developers
要約 ヘッドレス Chrome は Chrome 59 でリリースされています。これは、ヘッドレス環境で Chrome ブラウザを実行する方法です。つまり、Chrome なしで Chrome を実行することになります。Chromium と Blink レンダリング エンジンが提供する最新のウェブ プラットフォームのすべての機能をコマンドラインにもたらします。 なぜこれが有用なのでしょうか。 ヘッドレス ブラウザは、可視 UI シェルが必要ない自動テストやサーバー環境に最適なツールです。たとえば、実際のウェブページに対してテストを実行したり、その PDF を作成したり、ブラウザが URL をレンダリングする方法を確認したりできます。 ヘッドレスの開始（CLI） ヘッドレス モードを開始する最も簡単な方法は、コマンドラインから Chrome バイナリを開くことです。Chrome 59 以降がイ
集中するためにFocus.app使い始めた - 人権喪失メンヘラワンダーランド
集中しているときにSlackの通知とかTwitterの通知がきて集中が途切れてしまったり，そもそも自分からついついTwitterを見てしまうみたいなことがあるのでそれを防ぐためにFocusというアプリケーションを使ってみてる． heyfocus.com 基本的には，タイマーをセットしてその時間は指定したウェブサイト，アプリケーションがブロックされるというやつ． 特定のサイトをブロックするみたいなのはブラウザ拡張とかでよくあるけど，これはアプリケーションもブロックできるのでべんり． アプリケーションはこんな感じでブロックしている． 他に気に入っているポイントとしては，タイマーが開始した時と，タイマーが終了したときにbash scriptを動かすことができるのでべんり．自分はそこで会社のSlackの分報チャンネルにタイマー開始/終了を通知している(普通にcurlで叩いているだけ)． チームメン
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
Google、ブラウザ向け「Chromeアプリ」の提供を2018年までに段階的に終了へ（Chromebook向けは対象外）
「Chromeアプリランチャー」でChromeブラウザを起動していなくても単独アプリのように開けるのも特徴の1つだったが、ランチャーの提供は7月に終了しており、現在はChromeブラウザの「新しいタブ」右上の「Googleアプリ」アイコンから開くようになっている。 Googleによると、現在パッケージアプリを使っているのはChromeブラウザユーザーの約1％にすぎないという。また、ホステッドアプリのほとんどは既にWebアプリに実装されているという。こうした状況なので、Chromeアプリプラットフォームの展開から離れる時がきたと説明した。 終了は以下の3段階で進める計画だ。 2016年中に、新規公開のChromeアプリはChrome OS向けのみになる（既存アプリのアップデートは可能） 2017年下半期に、Chromeブラウザで開いたChromeウェブストアではアプリが表示されなくなる（拡張
How can I get the URL of the current tab from a Google Chrome extension?
Use chrome.tabs.query. ManifestV3: (async () => { // see the note below on how to choose currentWindow or lastFocusedWindow const [tab] = await chrome.tabs.query({active: true, lastFocusedWindow: true}); console.log(tab.url); // .......... })(); ManifestV2/V3: // see the note below on how to choose currentWindow or lastFocusedWindow chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs =
GoogleアナリティクスでChrome拡張のcontent_scriptsをアクセス解析する
Chrome Extension（Chrome拡張）で、content scripts の Google アナリティクスによるアクセス解析を試してみたところ、上手くできたのでシェアしておきます。やってみたら案外簡単だったものの、情報源自体はかなり少なかったです。基本的に、以下のページで考えた方法でやってみましたところ上手くいきました。 Chrome拡張をGoogle Analyticsで解析する方法まとめ | EasyRamble 基本的な方針として、content scripts で直接トラッキングは行えないので、Message Passing で content scripts → background へとメッセージを送り、background の chrome.runtime.onMessage.addListener にイベントをトラッキングするコードを埋め込みます。 Chrom
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【chromebook 生活第 12 回】Chromebook でキーボード設定してスペースを半角固定にする | ざかしんく
Dev Tips
https://developers.google.com/web/tools/setup/workspace/setup-devtools