How to Use Chrome's @ Shortcut to Find Things in Your Browser
Chrome's @ shortcut allows you to easily find bookmarks, tabs, and more from the address bar. Here's how to use the feature. If you’re a Chrome user who often has plenty of open tabs and bookmarks saved, then you’ll know how frustrating it is to lose these pages in your browser. Nobody wants to spend time looking for lost pages! While Chrome already has a tab search feature, there’s an even more e
Chrome拡張機能をmanifest v3で開発した簡易記録とハマりポイントの解消方法 - 雑多に技術メモと他色々
Chromeの拡張機能（プラグイン）を自作で作ってみたので、色々書く。 やってみたこと やった結果 動かせたの？ 開発した時の環境 ハマりポイントと解消方法の一覧 そもそも拡張機能を作るために必要な構成や作るべきファイルがわからない 開発成果物のそれぞれの役割がよくわからない 自作したChrome拡張機能の取り込み方法がわからない ツールを修正した時の取り込み方法がよくわからない service_workerが動作しない原因がわからず、デバッグもできない content_scriptsに指定したcssの参照先画像(URL)にアクセスできない 拡張機能アイコンクリック時の動作が定義しても動かない service_workerで外部jsが使えない 自作した拡張機能用HTMLでonclick属性が動作しない Local Storageから読み込んだ情報が想定外にObjectになった Javasc
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拡張機能 manifest.json Ver.3の書き方 - Qiita
はじめに 現在のChrome拡張機能のマニフェストのバージョンはV2とV3がありますが、こちら によると、 - 2022/1/17 でmanifest v2で新規公開はできなくなる - 2022/6でmanifest v2で非公開でも新規登録はできなくなる - 2023/1で例外を除き,既存のmanifestV2の機能は動かなくなる - 2023/6でmanifestV2は例外なく動かなくなる とのことなのでよっぽどの理由がない限りV3を今後は使うことになります。 V2で書かれた情報の記事はいっぱいあったのですが, V3の記事はあまりなかったので自分用メモも兼ねて整理しようと思います。 manifest.jsonの基本設定 manifest_version 拡張機能自体のバージョンではなく、マニフェストのバージョンです。 ここはとにかく 2 ではなく 3 にしておきましょう！
開発体験を変える! Chrome DevTools Tips 7選 - Qiita
最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で
Chrome 71で検討されている iframeへのPermission Delegation - ASnoKaze blog
Webサイトがカメラや位置情報をアクセスする際にパーミッションを要求する場合がある。iframeで埋め込んだページでも同じようにパーミッション要求が行える。 Chrome 71で導入が検討されている「Permission Delegation」では、iframeで埋め込まれたページでのパーミッション要求の仕組みがわかりやすくなる。(iframe内のドメインからパーミッション要求されても、普通のユーザにはわかりにくい) iframe内でパーミッションが必要になった際、top level origin(URLバーに表示されているサイト)がパーミッションを要求し、その権限を移譲する形になる。 その結果各パーミッションはtop level originに紐づくため、ユーザは権限の管理が行いやすくなる。 例 https://asnokaze.com/pd.html は以下のように、iframeを埋め
知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
[Managed PKI for SSL] Google Chrome57 のバグにより EV SSL 証明書の組織名がグリーン表示されない事象について
Description [2017年4月20日更新] Google Chrome 58 にて、バグが改修されたことを確認いたしました。 【概要】 Google Chrome の最新バージョン 57 において、Managed PKI for SSL から発行された EV SSL証明書をご利用いただいているにも関わらずアドレスバーに組織名が表示されないバグが発生しました。 この問題は Google Chrome 57 においてのみ発生しています。 【影響】 Google Chrome 57 で、以下の発生原因に該当する順序で証明書ポリシーが記載されたEV SSL証明書のサイトへアクセスした場合、アドレスバーの左側に組織名が表示されず、「保護された通信」という文言のみ表示されます。 【発生原因】 Google Chrome 57 では、証明書ポリシー（OID 2.5.29.32） が次の順序で
【CSS】transitionプロパティ使用時に、Chromeブラウザで1pxずれる現象を回避する | バシャログ。
先週インフルエンザに感染して、ダウンしてました ishida です。 今年のインフルエンザは感染力がかなり強いようで、 次女→自分→長女→嫁（いまココ）と感染してしまいインフル一家となってしまいました。。。 助けてぇ〜。 急な高熱・のどの痛み・関節痛などの症状がでたら、すぐ病院に行きましょうね。 さて今回は、先日コーディング中に遭遇したChromeブラウザのみにおきた現象を回避するための Tips を紹介します。 最近のHTMLコーディングでは、ボタンなどのマウスオーバーエフェクトを CSS で対応することが多いです。よく使うのは、以下のようなものです。 ソースコード HTML <p class="button"><a href="#"><img src="hogehoge.png" alt="ボタン" width="300" height="80"></a></p> .button {
Webブラウザアドオン「Styish」、ユーザーデータの収集を始めて騒動に | スラド IT
FirefoxやChromeなどで利用できる、指定したサイト毎に異なるユーザースタイルシートを適用できる拡張（アドオン）の「Stylish」がユーザーデータの収集を開始したとしてレビューに批判が集まる状況になっている（Chrome版Stylishのレビューページ、Firefox版Stylishのアドオンページ）。 プライバシーポリシー（2017/01/01改定）では「個人を特定できない形で情報を収集する」となっているほか、基本的には第三者には提供しないが匿名化された情報に付いてはパートナーに提供する、という話が書かれている。 Chromeの場合、ユーザーへの通知なしに自動的に拡張がサイレントアップデートされることがあるので利用者は要確認。 Tech News Directoryによると、2016年10月にStylishはJustin Hindmanなる人物にその所有権が移っているとのことで
ブラウザ拡張の権限でどこまで悪いことをできるのか？とその対策【デモあり】 - Qiita
[2018/07/07 追記] 本記事ではChrome拡張について説明していますが、Firefox1やEdgeの拡張機能もほぼ同じ仕組みで動いています。 [2023/11/06 追記] #参考 ページを追加しました。 Chrome拡張。便利な機能を簡単に追加できるので使っている人も多いと思います。 ただ、インストール時の権限の注意書きが分かり難いので無条件に承認（追加）していることもあるのではないかと思われます。 そこで、本記事ではChrome拡張の権限の種類・確認方法の他、拡張がどこまで（悪いことを）できるのかとその対策を3段階の権限（危険性）レベルごとに紹介していきたいと思います。 便利だが危険性もあるChrome拡張 Chrome拡張をインストールすると、Webページを読むというブラウザ本来の機能だけでなく様々なことができるようになります。 例えば、Webメールの新着通知や記事などの
SessionBox - Multi login to any website
Using websites with multiple accounts at the same time is made easy. Create an independent tab with a click of a button. Use one browser with multiple active sessions per site. Log into multiple accounts on the same site simultaneously. No more need for secondary browsers, private sessions, let SessionBox handle these for you. Your sessions are securely synchronised between your devices by using y
するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary
サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報（新卒・キャリア） といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div
Mixmax for Google Chrome
The Sales Engagement Platform built for B2B revenue teams. Create powerful workflows to generate and close more revenue, from outbound to expansion. Mixmax empowers your entire revenue team to do more with less - in days, not months. BUILD MORE PIPELINE Streamline your daily activities to work smarter and get more done. Automatically have high-priority items added to your to-do list in real time.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://bugs.chromium.org/p/chromium/issues/detail?id=75585
Engadget | Technology News & Reviews
「Google Chrome 85」のPDF印刷は障害者に優しく ～タグ付きPDFを標準化／「Chrome Headless」でも利用可能
Engadget | Technology News & Reviews
Product Hunt Gems - Chrome Web Store
http://template-extension.org/
