1 - 40 件 / 670件
ちゃだいん(@chazuke4649)です。 DeepLの公式Chrome拡張機能がヤバかったので勢いにまかせて紹介します。 "公式版"がリリースされてたの知ってた? DeepL翻訳(ベータ版) - Chrome ウェブストア ベータ版ではありますが、いつの間にか公式版がリリースされていました。自分は今まで公式版がなかったので、以前は非公式版のツールを使っていました。 インストールする Chromeウェブストアからインストールすると、右上にアイコンが表示されます。それをクリックすると以下ポップアップ画面が表示されます。 現時点では以下2つの機能が存在します。 読む: ブラウザ上の文章を任意の言語に翻訳して表示できる 書く: ブラウザ上に入力している文字を任意の言語に変換できる それぞれ試してみます。 「読む」 一般的にはこちらがよく認知されている機能だと思います。 下図のように、翻訳したい
おたま@男子二児の母 @otamashiratama 大学の先輩に久しぶりに会って楽しくて調子に乗った私が「何かタメになる話して下さいよ〜」と無茶振りしたら先輩が「そうだな...Netflixを見るときにChromeの拡張機能を使うと英語字幕と日本語字幕を画面下に同時に出せる上に、字幕をクリックすればそこから再生できる」と有用すぎる情報をくれました 2022年04月02日 21:59:32 おたま@男子二児の母 @otamashiratama 先輩「英語の映画を英語字幕で見るとき、その下に日本語訳が常に出てる安心感がすごい。初見の英語映画を英語字幕で見るハードルが一気に下がる」 私「私の期待をはるかに超えた有用な話でびっくりしました」 先輩「英語の勉強がはかどるぞ」 私「Twitterに投稿していいですか」 先輩「いいよ」 2022年04月02日 22:01:09
数年ぶりに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
YouTubeに拡張機能をダウンロードすることで、視聴体験がググッとアップします。 ただし、これらの拡張機能をダウンロードする際には、調子に乗ってインストールしすぎるのも注意。 スピードが落ちたり、プライバシーが危険にさらされたりするおそれもあります。各拡張機能が求めてくる許可に、「ここまでだったら許せる」という一線を引いてそれを守り、本当に必要な機能だけをインストールするようにしましょう。 1. Enhancer for YouTubeインストールする拡張機能がひとつに限られるなら、選ぶべきは「Enhancer for YouTube」でしょう。 広告がブロックできるほか、どんな動画でもボリュームを大きく上げられますし、デフォルトの画質やフレームレート、コーデックも選択肢が豊富です。Chrome、Firefox、Safari、Operaで利用できます。
以下の公開計測会でやったものを個別に解説してみる。 細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。 Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。 宣伝: これを御社のサイトで解説する仕事をやっています。 デモのURL これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。 DevTools を開く F12 or 右クリックから「検証」 DevTools > Lighthouse この状態で計測 このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方 点数部分にマウス
{ "manifest_version": 3, "name": "Create markdown link", "version": "1.0.0", "icons": { "16": "logo/16.png", "48": "logo/48.png", "128": "logo/128.png" }, "description": "Create markdown link from selected text", "content_scripts": [{ "matches": ["<all_urls>"], "js": [ "content.js" ] }] } manifest_version 拡張機能が使用するマニフェストファイル形式のバージョンを指定します。現在のバージョンは3です。 早ければバージョン2は2024年6月以降に廃止され、無効になりインストール/使用できなくな
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事は、bytefish氏による「Use Chrome DevTools Like a Senior Frontend Developer」(2020年7月21日公開)の和訳を、著者の許可を得て掲載しているものです。 シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう 開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッ
Google、PDF論文を劇的に読みやすくするChrome拡張「Google Scholar PDF Reader」 米Googleが「Google Scholar PDF Reader」というPDF形式の論文を読みやすくするChromeブラウザ拡張機能の提供を開始した。 プラットフォームやOSに依存せず、クリーンで、文章の構造が一貫しているPDFは、学術文書の標準的なフォーマットとして広く利用されている。しかし、一方で、引用されている他の文献にジャンプするのが難しかったり、あるいは特定のセクションを閲覧したくても、PDFの構造上、簡単に移動できないなど、閲覧性に関して不便と感じる面もある。Googleは「Google Scholar」という学術論文の検索エンジンを提供している。シンプルで分かりやすい画面構成で、良質な学術文書を効率的に見つけられるサービスである。Scholar PDF R
Intro 「新しい API などを、どうやって調べているのか」「仕様などを調べる際に、どこから手をつければ良いのか」などといった質問をもらうことがある。 確かにどこかに明文化されていると言うよりは、普段からやっていて、ある程度慣れてきているだけなものであり、自分としても明文化していなかったため、これを機に解説してみる。 やり方は一つではない上に日々変わっていくだろうが、頻繁にこの記事を更新するつもりはない。また、筆者は実務で必要になるというよりは、ほとんどを趣味でやっているため、このやり方が合わない場面は多々有るだろう。 スコープとしては、ライブラリ、ツール、フレームワークなどではなく、Web プラットフォーム関連の標準やブラウザの実装状況などに限定している。 Scope 従来からあり、広く認知された API については、情報も多く調査の敷居はそこまで高くないため、今回は議論が始まって間
ある日、コードレビュー中ワイ ワイ「さぁ、今日も同僚のコードをレビューしていくでぇ」 ワイ「まずは新卒のT君のコードを読んでいこか」 ワイ「どれどれ...」 ワイ「ん?なんやこの??っていう書き方は...?」 ワイ「ググってみよか...」 ワイ「JavaScript ??と入力して、検索ボタンをポチッとな」 ワイ「...あれ?それらしい検索結果が出てこんな...」 ワイ「ぐぬぬ、記号関係はググりづらいこともあるんやな...」 ワイ「これじゃあ今日はもう、酒飲んで寝るしかないやないか...」 〜飲酒、そして就寝へ...〜 では JavaScript で ?? の検索方法はどうしたらいいのか? ここに1つの解答を示しておきます! 「javascript double question mark」と検索すること です。 この記事はどうやったら自分の欲しい情報が効率よく見つけられるのか試行錯誤してきて身についたググり力を紹介して
ガジェット全般、サイエンス、宇宙、音楽、モータースポーツetc... 電気・ネットワーク技術者。実績媒体Engadget日本版, Autoblog日本版, Forbes JAPAN他 YouTubeは今年、ブラウザーの拡張機能などで提供される広告ブロッカーへの対策を強化し、ユーザーが使用し続けると「広告ブロッカーの利用は、YouTube の利用規約で認められていません」と警告画面を表示するようになりました。 この画面が現れた場合、選択肢に従ってAdblock PlusやuBlock Originといった広告ブロッカーの設定からYouTubeを除外するか、広告表示のない有料プラン「YouTube Premium」を使うことが求められます。 ×ばつボタンでいったん消すことはできるものの、そのままでは結局、動画再生時に再び警告画面を見ることになります。
Google Lensでテキストをスキャン いきなりですが、グーグルクローム関連の小ネタを3つ紹介。 Google Lensでテキストをスキャン 二窓検索機能 タブ検索 まず一つ目は、 現実世界にある文字・テキストを スマホのGoogle Lensのアプリで読み取り文字起こしして、 PCのGoogle Chromeに飛ばすというライフハック。 パソコンで作業してるときけっこう使えます。 まずはグーグルレンズで文字を読み込み、 場所・範囲を選択。 そして 上記画像の下部に「パソコンにコピー」ってあるのわかりますかね?? これをタップすれば、Google Chromeにコピーされ、 あとは PC上でCtrl+V コピペできるようになります。 例として上記画像の、サンタナのアルバム『キャラバンサライ』ライナーノーツから。 肉体は溶けて宇宙に変わる 宇宙は溶けて静寂の音に変わる 音は溶けてまばゆい
ググることは、すべてのデベロッパーにとって最も重要なスキルの1つです。知っておくと便利なGoogle検索のテクニックを紹介します。 完全一致の""はよく使用しますが、..や*は知りませんでした、便利ですね。他にも便利なのがあれば、ツイートなどで教えてください。 Use Google like a pro by Marko Denic 下記は各ポイントを意訳したものです。 ※(注記)当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 以下に紹介する方法は、それぞれを組み合わせて使用することもできます。 "what is javascript" Google検索でキーワードをダブルクォーテーション("")で囲むと、完全一致検索をします。
日々便利なプロンプトが生み出されたり、 ChatGPT pluginsの発表など話題が絶えないChatGPTですが、 今回はインストールだけでChatGPTがインターネットから得た最新の情報をもとに回答してくれたり、自分の質問履歴を検索できたり、世界中の人が作ったプロンプトを検索したり、自動同期をしてくれたりと、とても便利なChrome拡張機能をいくつかご紹介いたします。 拡張機能をインストールするだけなので、手間が全くかからずにすぐに使うことができます。 こちらの記事は随時更新追加していきます 機能 インターネットから適切な情報を検索し、ChatGPTの回答能力を向上させることができます。この無料のアドオンを利用することにより、関連性のあるオンライン情報をChatGPTに与える質問に組み込むことができます。その結果、ユーザーはより正確で最新の情報に基づく会話を楽しむことができるようになり
業務には「同じ作業の繰り返し」がつきものですが、何度も同じ作業を繰り返していると「こういう単純作業を任せるために機械ってものが生まれたんじゃないのか?」と思うわけです。無料のChrome・Firefoxの拡張機能「UI.Vision」を使うと操作を自動化できるマクロが組めて単純作業がラクチンになるとのことなので、実際に使っていました。 Open-Source RPA and Web Automation Tools for macOS, Linux and Windows https://ui.vision/ というわけで、実際にUI.Visionを使ってみます。Chrome版とFirefox版は、それぞれ以下の公式拡張機能ストアからダウンロード可能です。 UI.Vision RPA - Chrome ウェブストア https://chrome.google.com/webstore/de
Hello world ショートカットキーを設定する アイコンを設定する スクリプトを実行する オプション設定画面 Hello world Chrome の拡張機能を開発する手順について説明します。まずは、拡張機能が実行されたらポップアップを表示するだけのものを作成してみます。下記のフォルダとファイルを作成します。 my-extension manifest.json popup.html { "name": "My Extension", "description": "My Extension", "version": "1.0", "manifest_version": 3, "action": { "default_popup": "popup.html" } } <!DOCTYPE html> <html> <body> <h1>Hello world!</h1> </body>
Cache Storageがめちゃくちゃ肥大化する問題 TBSのニュースサイト、TBS NEWS DIGがめちゃくちゃブラウザのストレージを消費しているという話がはてブや増田で話題になっています。 TBSのニュースサイトヤバない? – はてな匿名ダイアリー 同・はてなブックマーク 確かに、手元でも同様の状況を観測できる。 当該サイトのストレージ使用状況 はたして、これは真実なのだろうか。本当に1.4GBも食うことがあるのだろうか...... そんなわけない、ということで調査 まずは再現性を確認するためにChromeのゲストモードで当該のサイトのDevtoolを開いてましょう。すると、StorageのUsageは386MBになっていました。(適当なページを開き、リロードした時点で340MB程度であった) 当該サイトのストレージ割合 上記のスクリーンショットをよく見ていただけるとわかると思いますが、こ
見ているサイト上に露出している機密情報(APIトークン、IPアドレスなど)を見つけるブラウザ拡張を作りました SecretlintというAPIトークンなどの機密情報がファイル内に含まれているかをチェックできるツールを書いています。 Secretlintはコマンドラインツールとして動くので、主にCIやGitのpre-commit hookを利用して、リポジトリに機密情報が入るのを防止できます。 SecretlintでAPIトークンや秘密鍵などのコミットを防止する | Web Scratch 一方で、実際のウェブサービスなどは機密情報がファイルにハードコードされているわけではなく(Secrelint自体がこういうハードコードを防ぐツールです)、環境変数やDatabaseに保存していると思います。 このような場合にも、コードのミスなどによって公開するべきではない情報(秘密鍵、APIトークン、Sl
はじめに こんばんは! 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか? 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか?DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です! 1 CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう! import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
あろおん🏴☠️C106土曜南b-14b @AroON_1106 世のオタクのためにガチの有益情報流す PCのブラウザでYoutube一時停止して画面上で右クリックを「2回」押すと動画フレームをコピーや保存でその場面の画像がきれいに保存できる、よ pic.x.com/Wy9OhLdQfu 2025年09月02日 05:46:24
オクシン @OKU_MAYA マジでオススメはPC画面のスクリーンショット。 Win→Windowsロゴキー+Shift+S Mac→Shift+command+4 あと仕事が速いビジネスマンが集まる営業の祭典S1グランプリが11月19日(土曜、13時開始)に無料オンライン生配信されます。私は挑戦者で出ます。申込URLこれ sales-no1gp.com/2022/ 2022年11月04日 11:10:29
ウェブブラウザで閲覧中のウェブサイトをページ中の画像も含めて保存したいと思ったときに、HTMLファイルと画像ファイル・スタイルシートが別フォルダになることなく、単一のHTMLファイルとして保存できるブラウザ拡張機能が「SingleFile」です。 SingleFile – Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/single-file/ SingleFile - Chrome ウェブストア https://chrome.google.com/webstore/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle SingleFile - Microsoft Edge Addons https://microsoftedge.microsoft.com
Chrome 97のDevToolsに新機能、Webブラウザ上の操作を記録、再実行、編集、保存。Puppeteerスクリプトへのエクスポートも Googleは、来年1月に登場予定のChrome 97で、DevToolsにWebブラウザ上での操作内容を記録し、再実行や編集、保存などを可能にする新機能を搭載することを明らかにしました。 Introducing the new Recorder panel You can now record, replay and measure user interactions with @ChromeDevTools. See it in action - ordering coffee. Learn more about this preview feature (available in Chrome Canary now): https://t.c
米アルファベット傘下グーグルにインターネット閲覧ソフト「クローム」の売却を命じるよう求める米司法省の提案を裁判所が受け入れた場合、同事業の価値は最大200億ドル(約3兆1000億円)に上る可能性がある。実現すれば、世界有数のテック企業に反トラスト法に基づく事業売却を求める歴史的ケースとなる。 関係者によれば、司法省の反トラスト法執行担当者は、コロンビア特別区(首都ワシントン)連邦地裁のアミト・メータ判事に対し、人工知能(AI)とスマートフォンの基本ソフト(OS)「アンドロイド」に関する措置をグーグルに求めるよう要請する方針だ。 ブルームバーグ・インテリジェンス(BI)のアナリスト、マンディープ・シン氏は、30億人以上の月間アクティブユーザーがいることを考えると、売却が実現した場合、クロームの価値は「少なくとも150億-200億ドル」相当に上ると試算した。 メータ判事は今年8月にグーグルがオ
最近趣味や仕事の Web アプリケーションでメモリリークに遭遇して、頑張ってメモリリークの原因を突き止めて修正する、ということがあった。その過程でメモリリークについて色々調べて知見が溜まったので、学習資料の紹介という形でアウトプットしてみる *1。 前置き 紹介する記事がかなり偏っていることに注意 冒頭で触れたメモリリークを解決するために読んだ記事をまとめただけなので、内容にそれなりの偏りがある 例えば id:mizdra が遭遇したメモリリークは全てブラウザ上で発生していたものだったので、これから紹介する内容も主にブラウザにおけるメモリリークに焦点を当てたものになる GC がどうメモリをどう解放しているか、何故メモリリークが発生するのかは全てカット 調べれば色々な記事が出てくるので、必要に応じて読んでください 基本的な知識を抑える まずメモリリークとメモリ撹拌の違いを学ぼう どちらも同じ
を読んで思い出したのでご紹介です。 元の記事と同様に以下の関数 sum について、 function sum(nums, acc = 0) { console.log({ nums, acc }); if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } この関数sumの引数 (nums と acc) の呼び出しごとの変化を見たい場合は、所謂プリントデバッグや debugger を使うのは一般的なテクニックとしてよく知られていますが、このような関数呼び出し時の引数を知りたい場合はmonitor(function)という関数を使うことで同様の効果を得ることが出来ます。 この場合は monitor(sum)とした後に、関
Firefoxとは "Mozilla Foundationおよびその傘下のMozilla Corporationによって開発されているフリーかつオープンソースのウェブブラウザである。"(Wikipediaより) リンク Mozilla 史上最速の Firefox をダウンロード より高速なページ読み込み、メモリ使用量削減、機能満載の最新版 Firefox が登場しました。 166 users 1936
知らなかった! ウェブブラウザ「Chrome」のこんな便利な機能12選2021年03月05日 19:30127,433 David Nield - Gizmodo US [原文] ( そうこ ) Chromeスキルが上がったぞ! ウェブブラウザ何使っていますか? 私がメイン使いしているのはGoogle Chromeです。長いことずっーっとChromeです。それでも、まだまだ知らないことはたくさんあります。Googleも常に新機能アップデートしてますからね。あまり知られていないChromeの便利機能をまとめました! 1:ゲストモードへ切り替え「ちょっとパソコン貸して?」と言われた時に便利なのがこれ。自分が普段使いしているブックマークはもちろん、開きっぱなしのタブや、ログイン状態のページをもし見られたらと思うとハラハラします。別に何もやましいことないけど、なんかソワソワします。そういう時はゲスト
DeepLopener はDeepL翻訳のAPIを利用したGoogle chrome の拡張機能です。 ページ翻訳やドキュメント翻訳、PDF上に翻訳結果を表示することができます。 下の記事に移行しました. t3ahat.hateblo.jp 【2022年2月14日追記】 Android版をリリースしました! まだ機能は少なめですが、よかったらお試しください. play.google.com
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Firefox / Safari MozillaはMozilla Specification Positionsというリストを公開しています。 IETFやW3C、TC39などが提唱しているWeb技術に対して、Mozillaはどのように評価しているかという立ち位置を表明したものです。 あくまで現時点での評価であり、もちろん今後の仕様変更などに伴い評価は変わる可能性があります。 Mozilla's Positions Mozillaはどのように評価しているかの分類。 under consideration 評価の検討中。 important
mizdra.icon が社内向けに発表した資料なのですが、折角なので一般向けに書き直して公開します。
どうも、三町哲平です!! 今回は超便利なGoogle Chromeの拡張機能を見つけたので、そのご紹介です! その前にGoogle Chromeの拡張機能って何? 拡張機能は「Chromeウェブストア」から追加します。ここでは「One Tab」という拡張機能を追加してみましょう。拡張機能をインストールすると、Chromeの右上にアイコンが追加されます。 ほとんどの拡張機能は基本的に無料で提供されていますが、拡張機能をいくつも追加するとChromeの動作が遅くなる原因になります。できるだけ選りすぐりのものを利用するようにしましょう。 引用元:Google Chromeの「拡張機能」とは | できるネット 上記の引用内容でもある様にGoogle Chromeをより便利にカスタマイズできる様に様々な拡張機能があります。 その拡張機能の中で、__「このサイト何の技術でできているんだろう?」が一発で
ChromeでCookieのSameParty属性の開発が進められている (コミット)。 現在のところ「SameParty cookie attribute explainer」に説明が書かれている。 今回は、CookieのSameParty属性について簡単にメモしていく。 背景 トラッキング対策、プライバシーの観点でサードパーティクッキーは制限する方向に進んでいる。その制限をSame Partyの場合に緩和する仕組みを提供するのがSameParty属性の話である。 例えば、同一主体により運営されているドメインの異なるサイト (例えば、google.co.jp, google.co.uk) 間においては、いわゆる(cross-site contextsで送られる)サードパーティクッキーを許可しようという話です。 もともとは、First-Party Setsを活用しSameSite属性にFi
こんにちは、ヌヌです。 初めに 最近、ChatGPTが大きな話題になっています。私もChatGPTを使ってみたところ、その素晴らしさに感動しました。 ChatGPTを最大限に活用するためには、様々な拡張機能を活用することができます。このブログでは、私自身が利用してよかった、ChatGPTのためのChrome拡張機能を紹介します。 前提 ChatGPTにログインができる リンク:https://openai.com/blog/chatgpt Chrome ブラウザを使用 拡張機能 AIPRM for ChatGPT 概要 ChatGPTからSEO、SaaSなどのために整形かされた回答を受けたい場合役に立てる拡張機能です。 AIPRMから提供されているテンプレートを利用して質問を投げることができます。このテンプレートのためChatGPTが質問の内容をよく理解できるしより良い回答を返します。 使
WebAssembly製のx86仮想マシン「WebVM」が登場、Webブラウザ上でLinuxや各種コマンド、アプリがそのまま実行可能 Leaning Technologiesは、Webブラウザ上でx86バイナリをそのまま実行できるWebAsesmbly製の仮想マシン「WebVM」を発表しました(同社による紹介記事「WebVM: server-less x86 virtual machines in the browser」)。 Google ChromeやMicrosoft Edge、Firefox、Safariなどのモダンブラウザであれば、上記のURLにアクセスすることで誰でもWebブラウザ上にx86仮想マシンを走らせることが出来ます。 WebVMではx86仮想マシンの上でLinux OSのDebianがバイナリが変更なしにそのまま稼働し、さまざまなコマンドも実行可能。 Linuxアプリ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く