超簡単にChromeの拡張機能を作ってみる【誰でもできるよ】 - Qiita
はじめに みなさんはChromeの拡張機能を使っていますか？ 僕も使っていますが、案外Chromeの拡張機能を作るのは簡単です。 今回は、普段の業務の効率を上げるのも兼ねて自作してみました! 最低限準備するもの manifestファイル Javascriptファイル ぶっちゃけ、これだけで動きます。 実際に作ってみよう それでは実際に作成していきましょう。 今回はDとVを押すだけで、Markdownのリンクを作成する拡張機能を作成していきます。 まずは、manifestファイルから設定していきます! manifestファイル を参考にして、備忘録も兼ねて説明していきます。 今回は、最低限の設定を行います。 { "manifest_version": 3, "name": "Create markdown link", "version": "1.0.0", "icons": { "16":
Web制作者は要チェック！ Chrome 119で追加された、疑似クラス、相対カラー構文など4つの新しいCSSの機能
New in Chrome 119 Chrome 119 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 Chrome 119で追加された4つの新しいCSSの機能 CSSの疑似クラス「:user-valid」「:user-invalid」 CSSの相対カラー構文(RCS) CSSのclip-pathで「geometry-box」値 CSSのclip-pathで「xywh()」と「rect()」値 Chrome 119で追加された4つの新しいCSSの機能 11/1にリリースされたChrome 119で4つの新しいCSSの機能が追加されました。対象となるChrome 119は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。 以下、その4つの新
Tether elements to each other with CSS anchor positioning | Blog | Chrome for Developers
How do you currently tether one element to another? You might try tracking their positions, or use some form of wrapper element. <!-- index.html --> <div class="container"> <a href="/link" class="anchor">I’m the anchor</a> <div class="anchored">I’m the anchored thing</div> </div> /* styles.css */ .container { position: relative; } .anchored { position: absolute; } These solutions often aren't idea
Google Chrome、メモリの大食い、やめるってよ
Google Chrome、メモリの大食い、やめるってよ2023.02.20 19:00133,983 三浦一紀 これは期待大。 多機能で使いやすいWebブラウザ｢Google Chrome｣が、最新バージョン｢Chrome 110｣で、｢メモリセーバー｣と｢省エネモード｣を搭載。 順次アップデートが行なわれています。 メモリとバッテリーを節約｢メモリセーバー｣は、アクティブではないタブのメモリを解放して、アクティブなタブや他のアプリのために使用する機能。 ｢省エネモード｣は、バックグラウンドアクティビティと視覚効果を制限して、バッテリーを節約する機能です。 僕のChromeにもやってきた！ということで、自分のGoogle Chromeを見てみたら、最新のChrome 110のアップデートが来ていたので、早速アップデートしました。 Image: 三浦一紀設定画面で｢パフォーマンス｣という項
Google、ChromeとAndroidのパスワード管理UIを統一 自動生成ではないパスワード設定が可能に
Google、ChromeとAndroidのパスワード管理UIを統一 自動生成ではないパスワード設定が可能に 米Googleは6月30日（現地時間）、ChromeブラウザとAndroid端末で提供しているパスワード管理サービス（Androidでは「パスワード マネージャー」）の複数の改善を発表した。また、iOS版Chromeでもパスワードを自動生成できるようにする。 ChromeとAndroidでのUI統一 Chromeのパスワード管理機能は、［設定］→［自動入力］→［パスワード］に、Androidのパスワード マネージャーは、［設定］→［プライバシー］→［Googleの自動入力サービス］→［パスワード］という奥深いところにある。この2つは実質同じものだが、これまでユーザーインタフェース（UI）がかなり違った。まず、これを統一する。 また、同じサイトあるいはアプリで複数のパスワードを設定し
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
バーグハンバーグバーグ社員に便利なChrome拡張機能を聞いてみた | オモコロブロス！
みんな大好きGoogle Chromeですが、「拡張機能」を使えばさらに自分好みのブラウザにカスタマイズすることができますよね。 世界中の人々によって様々な便利機能が開発されており、Chromeウェブストア上でプログラムを更新するだけでそれらが使えるようになるんです。 そんな拡張機能ですが、「量が多すぎて、どれを使えばいいかわからん」状態になっている人も多いのではないでしょうか。 なので、今日はオモコロブロスの運営会社でもあるバーグハンバーグバーグの社員たちに実際に使っているChrome拡張機能を聞いてみました。 いいものを探すのはめんどくさいし、人から聞くのが一番手っ取り早いもんね！ 01.Amazonの値段変動がわかる機能 Keepa – Amazon Price Tracker amazonの値段の変動が見られる機能です。いつ安くなったのかをグラフで確認できるので、買い時を考える時に
昔の相棒PCを「Chrome OS Flex」で蘇生 仕事にどこまで使えるか、個人と組織視点でレビュー
皆さんには「青春をともに過ごした思い出の品」はあるだろうか。サッカーボール、文房具、楽器など、人によってさまざまな物が挙がるだろう。筆者は学生時代に使っていたこのノートPCに思い入れがある。 ASUS製で、型番は「U24A-PX3210」。2012年発売で、OSはWindows 7だった。高校入学時にお年玉貯金で購入し、ゲームを遊んだり、課題のレポートを書いたりするのに使った記憶がある。アイティメディアに入社する前、別のWebメディアでライターをしていたときも、これで原稿を書いていた。つまりかつての“相棒PC”というわけだ。 とはいえ、Windows 7のサポートが終了したこともあって今は使っておらず、しばらくたんすの肥やしになっていた。しかし最近、東京の自宅だけでなく神奈川の実家でも作業ができる環境を整えたくなり、新しいPCを買うのもお金がかかるので、どうにか再利用できないかと考えていた
New in Chrome 94 | Blog | Chrome for Developers
Here's what you need to know: The default color space for <canvas> elements is now formally defined in the spec as SRGB, and you can change it to Display P3. WebCodecs is a new, low level way to access built in audio and video codecs, important for streaming games, video editors, and such. WebGPU starts its origin trial. The PWA Summit is coming up October 6-7. And there's plenty more. I'm Pete Le
全デバイス・全ブラウザで PDF を読みたい - Kaizen Platform 開発者ブログ
TL;DR PDF を画面に埋め込む方法は、iframe, object, embed, Viewer（3rd party library の利用）がある。 ブラウザネイティブの PDF 表示機能はブラウザ差異が大きいため、PDF を canvas や svg に変換して表示するライブラリやビューアーを利用した方が安定する。 しかし 3rd party library / service の利用はバンドルサイズやランタイムでの変換にコストがかかるため、なるべくブラウザネイティブなやり方で PDF を開きつつ、一部ブラウザ向けに対してのみ 3rd party library/service 経由で表示するように分岐させたい。 どのブラウザならブラウザネイティブの機能が使えるかを調べるために、サポート範囲の全端末・全ブラウザで PDF の描画結果を比較・調査した。 はじめに 業務委託エンジニア
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
Chrome の User-Agent 文字列削減に関する最新情報
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Web制作が捗るChrome拡張機能12選 – おすすめの拡張機能を集めてみた | Pulp Note
Chrome拡張機能にはWeb制作に便利なものが多く、私もよく利用しています。特に1〜2クリックでさっとチェックできるものは頻繁に使い制作の中で馴染んだものであるため、これらがないと手間どってしまうくらい依存性の高いものばかり。今回は私がよく利用しているChrome拡張機能を12個紹介します。初見のものがありましたら、ぜひ試してみてください。 Eagle – 効率的に画像を保存する Eagle サイト上にある画像をドラッグ＆ドロップだけで保存できるChrome拡張機能。あとで見返したい画像を効率的に保存できるのは嬉しい。ページ全体のスクリーンショットの撮影も可能。撮影後は専用のアプリに保存されます。この手のものは他にもあったのですがサービス終了してしまい、他を探してようやく見つけたのがEagleでした。重宝しています。 Eagle – 効率的に画像を保存する 専用アプリのダウンロードはこち
突然、紹介されるAndroidアプリ集を書いた増田のガジェット
こういうオープンソースとか詳しい人ってどんなスマホやパソコン使ってんだろ？ 気になるし資金的余裕があれば真似したい anond:20210516133911 とのことなので暇だし書いてみる パソコン自作デスクトップパソコンOSArch LinuxCPURyzen 9 5900Xワーキングメモリ32GB DDR4 SDRAMストレージ(システム)1TB NVMe SSDストレージ(データ1)6TB SATA HDD(RAID0+1)ストレージ(データ2)6TB SATA HDD(RAID0+1)ストレージ(データ3)6TB SATA HDD(RAID0+1)ストレージ(データ4)6TB SATA HDD(RAID0+1)GPURadeon RX 6900 XT 16GBディスプレイモニタ(プライマリ)LG 35WN75C-Bディスプレイモニタ(セカンダリ)中華ノーブランド14インチ16:9タ
Chrome OSがmacOSを抜いてPC向けOS市場シェア2位に躍り出る
by Luis Roca PC向けOSの市場シェアは「1位がWindows、2位がmacOS」という状態が長らく続いていました。しかし、市場データ企業のInternational Data Corporation(IDC)とIT系ニュースサイトのGeekWireによるレポートで、2020年度のPC向けOSの市場シェア2位にGoogleのChrome OSが浮上し、ついにmacOSが3位に陥落したことが発表されました。 Chromebooks outsold Macs worldwide in 2020, cutting into Windows market share - GeekWire https://www.geekwire.com/2021/chromebooks-outsold-macs-worldwide-2020-cutting-windows-market-share/
超強力翻訳エンジン｢DeepL｣で英語サイトをまるっと翻訳できるChrome拡張機能
超強力翻訳エンジン｢DeepL｣で英語サイトをまるっと翻訳できるChrome拡張機能2021.02.16 11:0076,076 塚本直樹 課金制ですが…！ 正確な翻訳であっという間に人気ツールにのし上がった｢DeepL｣ですが、そのAPIを使ってページ翻訳やPDF翻訳ができるChrome拡張機能｢DeepLopener PRO｣が登場しました。 DeepLには無料翻訳機能や有料プランのDeepL Proだけでなく、開発者向けの｢DeepL API｣というプランもあります。記事執筆時点では月額630円＋100万文字あたり2500円のこのプランでは、DeepLの機能をAPIとしてサードパーティー製のツールに組み込めます。 そしてDeepLopener PROではこのAPI機能を使い、ページ全体を翻訳する｢レイアウト重視互換モード｣や｢ページ翻訳｣、それにPDFモードやテキスト重視置換モード、
新機軸を打ち出した「グーグルペイ」は無敵なのか、そのインパクトを検証する
2020年11月18日、米アルファベットが「グーグルペイ」の新戦略を明らかにした。注目されるのは、家計簿機能や銀行口座の提供という新機軸を打ち出した点だ。筆者は講演などにおいてかねてより、「『グーグル銀行』が誕生すれば、ほかのサービスはいらなくなるのではないか」、と繰り返し述べてきた。こうした背景もあり、今回は新しいグーグルペイがもたらすインパクトについて分析してみたい。 ブラウザーとOSを通じて得たポールポジション 新グーグルペイは、同プラットフォームにおける利用履歴を解析することで、家計簿を自動作成したり、支払った飲食代を事後的に割り勘して請求したりすることができる。さらに、10万超の飲食店でアプリ経由の注文ができるほか、3万超のガソリンスタンドで給油が可能だ。駐車代も支払える市も400を超える。注文機能を提供することでユーザーの動線を押さえており、これまでの“決済アプリ”というより、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【特集】 簡単便利なChromeリモートデスクトップの使い方。PC/スマホから遠隔操作してみる
Google Chrome、最大10GB削減できる省メモリモードと省エネモードを実装へ
Microsoft自身が提供 ～「Edge」の保存パスワードを「Chrome」で利用可能にする拡張機能／「Authenticator」モバイルアプリと組み合わせれば、ほぼすべての環境でパスワードを同期できる【レビュー】
