超簡単にChromeの拡張機能を作ってみる【誰でもできるよ】 - Qiita
はじめに みなさんはChromeの拡張機能を使っていますか？ 僕も使っていますが、案外Chromeの拡張機能を作るのは簡単です。 今回は、普段の業務の効率を上げるのも兼ねて自作してみました! 最低限準備するもの manifestファイル Javascriptファイル ぶっちゃけ、これだけで動きます。 実際に作ってみよう それでは実際に作成していきましょう。 今回はDとVを押すだけで、Markdownのリンクを作成する拡張機能を作成していきます。 まずは、manifestファイルから設定していきます! manifestファイル を参考にして、備忘録も兼ねて説明していきます。 今回は、最低限の設定を行います。 { "manifest_version": 3, "name": "Create markdown link", "version": "1.0.0", "icons": { "16":
【Chrome】ServiceWorkerを今度こそ決定的かつ完全に消去する - Qiita
前、Chromeを使うなら、必ずServiceWorkersを無効化しようという記事を書いたのですが、あの方法はてんで全然ダメダメでした。 chrome://serviceworker-internalsには無用なServiceWorkerが増え続け、chrome://flags/からはServiceWorkerの削除設定が削除されました。 そんなわけで、今度こそServiceWorkerを決定的かつ完全に消し去りたいと思います。 といっても自力でどうこうしたわけではなく、全面的に他人の力を借りただけですが。 Reject Service Worker Reject Service Workerをインストールする。 おわり。 かんたん！ 作者はtoshiさんです。 ありがとうございます。 アドオンの技術的内容はServiceWorkerを無効化するという記事に書かれているのですが、Serv
Chrome拡張作ったら異世界転生した件 - Qiita
// ランダムに要素を取り出す関数 const randomPick = (items) => { const index = Math.floor(items.length * Math.random()); return items[index]; }; randomPick("123456"); // 1〜6のどれか // 文字列の範囲を展開する関数 const expandCharRange = (str) => str.replace(/.-./g, (range = 'a-z') => { // ハイフンを挟んだ文字列を全て置換 const first = range.codePointAt(0); // 1文字目の文字コード const last = range.codePointAt(2); // 2文字目の文字コード const length = last - first
PythonとSeleniumでGoogle Chromeを動かしてみる - Qiita
PythonとSeleniumでGoogle Chromeを動かしてみる サマリ 公式のチュートリアルを見つつMacでやってみました。 少し詰まった部分があったのでメモ。 試した環境 OS: macOS Catalina 10.15.5 Python:3.8.0 Google Chrome:83.0.4103.116 webdriver:ChromeDriver 83.0.4103.39 インストール Pythonのライブラリをインストール ブラウザドライバーをインストール ドライバーは使っているブラウザバージョンに合わせて必要なものをDLします。 ブラウザをアップデートしていてもドライバーの最新版をインストールすればいいわけではありませんでした。 （よく見たらバージョンが違ったのでご注意を） わたしはプログラムを実行するディレクトリと同じ場所に置きました。 vaivailx@MacBoo
第596回 snapパッケージ版Chromiumを使用する | gihyo.jp
今回はUbuntu 19.10から本格的に使用されるようになったsnapパッケージ版のChromiumについて解説します。 Ubuntu 19.10のChromiumはsnapパッケージ版のみに Google Chromeのオープンソース版であるChromiumは、Ubuntuではuniverseリポジトリで提供しています。ということはCanonicalによるサポート（アップデート）はなくてもやむを得ないのですが、ユーザー数の多さを鑑みて実際にはCanonicalによってアップデートが行われています。Google Chromeは6週間ごとにメジャーリリースが行われていますが、Chromiumもこれに準じています。 Ubuntuは本記事の掲載時点で16.04 LTS、18.04 LTS、19.04、19.10の4つのバージョンがサポートされています。もちろんChromiumもこの4つのバージ
すぐにChrome拡張機能開発できるオープンソースのテンプレート「Chrome Extension CLI」
◆ Chrome Extension CLI https://github.com/dutiyesh/chrome-extension-cli 紹介 「Chrome Extension CLI」は、npmを使って簡単にChrome拡張機能の初期セットアップができるオープンソースのテンプレートです。 $ npm install -g chrome-extension-cli /usr/local/bin/chrome-extension-cli -> /usr/local/lib/node_modules/chrome-extension-cli/index.js + chrome-extension-cli@0.2.0 added 21 packages from 11 contributors in 2.879s まずは、Chrome Extension CLIをインストールします。 $
2020年向け 開発者向けブラウザ拡張機能９選 - Qiita
こちらの記事は、Indrek Lasn 氏により2019年 7月に公開された『 9 Useful Browser Extensions for Developers — 2020 edition 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek Web開発者として、私達はブラウザの拡張機能を存分に利用することができます。ブラウザの拡張機能は、作業環境とコーディングの生産性の向上にとても役立ちます。 2020年に近づき、数多くの新しい拡張機能が登場しました。そこでWeb開発者にとって最も便利な拡張機能を紹介します。 「私がかなたを見渡せたのだとしたら、それは巨人の肩の上に乗っていたからです。」 アイザック・ニュートン Refined GitHub Refined GitHubはGitHub
3年かけてたどり着いた英語記事を読むための方法 - Qiita
2023/07/03 要約ツールに｢ChatGPTを利用する場合｣を追加し、サンプルの生成結果を記載しました。 以前は英語の記事の読み書きが苦手だったのを、このようにして克服した、という話を書きます。 成果を数値で測ってないですが、RSSフィードに登録している英語メディアの数が大幅に増えました。以前は全体の5%程度に対し、今は50%以上が英語メディアになっています。英語に対する心理的ハードルは大きく下がりました。 また、読む力を付けたことで自作のOSSのREADMEもほぼ自力で書けるようになりました。 https://github.com/goodwithtech/dockle/blob/master/README.md では始めます。 全体像 僕の場合、1000文字以上の英文記事を読む場合、STEP1に含まれる内容は必ず行います。 STEP2に含まれるものは、辞書なしで読めないときだけ行
ゼロからはじめるPython(49) Pythonでブラウザ自動操縦してカード明細を自動でダウンロードしよう(その1)
クレジットカードの利用明細はこまめにチェックする必要がある。なぜなら、カードの不正使用などの危険があるからだ。しかし、最近ではオンライン明細が推奨されており、カード会社のサイトにログインして、明細をダウンロードしなければならないことも多い。カードが複数枚あるなら、それはかなり面倒な作業となる。そこで、自動でカード明細をダウンロードするプログラムを作ってみよう。今回は、環境の構築をし、簡単なプログラムを作ってみよう。 Webブラウザを自動操縦しているところ Webブラウザを自動操作しよう PythonにはデータをWebから取得する命令がいろいろある。最も簡単なのは、Pythonに標準で用意されているurllib.requestだ。これを使うと任意のURLからデータを取得できる。しかし、最近のWebサイトは、セッションという仕組みを利用していたり、JavaScriptでページをレンダリングした
Netflixで外国語が学べる、Chrome拡張機能「Mate」｜リスニング以外に単語もカバー | ライフハッカー・ジャパン
Nintendo Switchの純正プロコンを異次元レベルの操作性に!使わない理由がない革新的アダプター
Dockerコンテナ内でpuppeteerを使うとChromeゾンビプロセスがたまる問題 - その手の平は尻もつかめるさ
表題のような問題があり，その調査したという記録です．なお，結論を一言で言うと--initを使え，ということになります． そもそもDockerコンテナを起動すると，CMDあるいはENTRYPOINTに指定されたコマンドがコンテナ内でPID 1として起動します．これが何を意味するかと言うと，「CMDあるいはENTRYPOINTに指定されたコマンド」はそのコマンド自体の責務をまっとうするのと同時に，initプロセスとしての振る舞いも行わなければならないということになります (id:hayajo_77さんにこの辺を詳しく教えてもらいました，ありがとうございます)． つまりPID 1で動いているプロセスは「SIGCHLDをトラップすることで孤児プロセスを適切に回収し，waitpidをかける」という処理も適切に行う必要があります． さて，puppeteerを使ってChromeブラウザを起動するとどうな
Chrome の隠し機能 chrome://tracing (about:tracing) の使い方
こんにちは。仕事上で chrome://tracing (about:tracing) を使う必要が出たので、私の知っている限りの情報をここでまとめることにしました。 chrome://tracing の情報は世の中にあまりありません。もし記事中に間違いを見つけられたり、より良い利用方法をご存知の方は、ぜひ @tkihira まで教えてください。よろしくお願いします！ なお実際は隠し機能ではなく、ただあまり知られていないだけです。公式の情報は https://www.chromium.org/developers/how-tos/trace-event-profiling-tool ここから辿れると思います。 注意 この機能は、Chrome のインスタンス全体のプロファイルを取るものです。不用意に実行すると、すべての Chrome のタブを巻き込んで落ちます。記事中では Chrome Ca
Debugging JavaScript - Chrome DevTools 101
If you're still using console.log() to find and fix JavaScript issues, you might be spending more time debugging than you need to. This tutorial shows you how to make the most of Chrome DevTools so that you can debug your JavaScript as quickly as possible. Demo: https://goo.gl/MwytjG Doc version of this tutorial: https://goo.gl/NZxQdD Breakpoints Guide: https://goo.gl/9XYhhF JavaScript Debugging
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だと動作しないことがわかりました。 プロダクトコードをテストコードに合わせて書き直すことも考えましたが、それでは新しく使えるようになった便利な機能をいつま
極めろ！！Google Chrome Devtools 52の関節技 - Qiita
転職ナビのフロントエンドを担当しています、@sueshinです。 Livesense - 関 Advent Calendar 2017、22件目をお送りします。 どうぞ宜しくお願いします。 はじめに フロントエンドでよく注目されるJavaScriptではなく、 地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。 免責事項 ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。 Chromeのバージョンは63系に基づいて紹介しています。 52の関節技！！ Elements 1.hover時のコンポーネントのCSSルールを表示 使い方 ①DOM要素を選択 ②Stylesペインを開く ③:hovをクリック ④hoverフィルタを適用 2.対応するCSSファイルを開く 使い方
Chrome Extension のアイコン複数サイズ作るの面倒くさい - Qiita
Let's 自動化！ ビバシェルスクリプト!! このシェルスクリプトは ./icons/source.png から ./icons/16.png, ./icons/46.png, ./icons/128.pngの3つのアイコンを生成します。 このスクリプトを実行するには ImageMagick が必要です。 unsharpは綺麗にするオプションです。調べてもよくわからないのですが…。 #!/bin/bash for size in 16 48 128 do convert icons/source.png -resize ${size}x -unsharp 1.5x1+0.7+0.02 icons/${size}.png done
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
トラッキング規制と代替技術の最新情報まとめ
GitHub - sato1043/PixivTagCollectorChrome: これはpivivのタグ巡回を快適にするChrome拡張です。
GitHub - dantheman3333/scala-js-chrome-extension-example: A scala-js Chrome Extension example using scalajs-react with background, content, and popup scripts.
GitHub - fregante/chrome-webstore-upload-cli: CLI tool to upload Chrome Extensions to the Chrome Web Store
