vuejsもreactjsも使わないchrome拡張機能の作り方 - utamaro’s blog
chrome拡張機能の作り方 この記事では、一人でchrome拡張機能を開発して、ストアに上げるためのデータを作るまでをご紹介します。 また、有料のサンプルコードをBaseにて提供しています。 （googleで検索したページのタイトルをジョジョの名言に置き換える拡張機能です。） （購入はこちらから） utamaro.base.shop サンプル画像（左の検索結果が、右の画像のようになるサンプルです） ※ html, css, javascript, npmで依存関係の管理ができることを前提条件としています。 まずは、拡張機能を作るにあたっての要件を決めます。 要件 規模が大きくなっても、効率的に開発できること console.logデバッグをビルド段階で削除すること（ビルド後のソースに含まれない） html内のdomを作成する際はテンプレートとして用意したものを使う scssで開発する f
Chrome拡張機能開発でVue.jsを動かす – myMemoBlog by 256hax
Vue.jsをWebpackでビルドしたものを読み込めば、manifest.jsでunsafe-evalとかやらなくても実行できる。 ChromeでHelloWorld的な雛形（Hello Extensions）をつくる こちらに書かれているとおりに実行して、「Hello Extensions」を表示するまでをつくる。 Google Chrome 拡張機能を開発する -入門 Hello Extensions- こんな感じの構成になるはず。 Webpack + vue-loaderのインストール Vue.jsにおけるCSP環境の説明はこちら。つまり、Vue.jsをそのまま読み込んでも実行できないが、ビルドするとCSPをクリアして動作するとのこと。 Vue.jsのCSP環境 今回はWebpackを選択したのでこちらにアクセスする。 webpack-simple usageに書かれているとおりに
Vue.jsを使ったブラウザ拡張機能の作り方 - 物置小屋
はじめに ChromeやFirefoxなどの拡張機能はHTML、JavaScriptなどで書くことができます。 JSのフレームワークにはVue.jsなど扱いやすいものがありますが、Content Security Policy(CSP)だかでエラーになるので基本そのまま使うことはできません。 この記事ではVue.jsを使ったブラウザ拡張機能開発を楽に行えるテンプレートを紹介します。 使うやつ github.com vue-web-extension-boilerplateというやつです。 また、vue-cliが入っていること前提です。 使い方 $ vue init kocal/vue-web-extension example-extension 上記コマンドを打つことでテンプレートが展開されます。 example-extensionのところは各自プロジェクト名を入力しましょう。 なんか色
TypeScript での Chrome 拡張機能開発 Tips - Qiita
はじめまして、こんにちは、水音ぴねといいます。高知で大学生してます。 今回は、私が TypeScript を使って Google Chrome 拡張機能を作る上で見つけたことを書いていきたいと思います。 少々長くなりすぎた感があります。必要なところを、つまみ食いしてください。 前置き Google Chrome 拡張機能とは ? Google Chrome の機能を拡張するソフトウェアで、Web の技術 (JavaScript / HTML / CSS) 使って作ります。そして、一般的に Chrome 拡張機能と呼ばれるものには、大きく分けて以下の二種類があります。 拡張機能 アプリ (chrome://apps/ に表示されるもの) 「拡張機能」は、ブラウザの UI を拡張したり、ウェブページの内容を書き換えたりするものを指します。「アプリ」は、Chrome の API を使ったアプリケ
chrome.webRequest | API | Chrome for Developers
You must declare the "webRequest" permission in the extension manifest to use the web request API, along with the necessary host permissions. To intercept a sub-resource request, the extension must have access to both the requested URL and its initiator. For example: { "name": "My extension", ... "permissions": [ "webRequest" ], "host_permissions": [ "*://*.google.com/*" ], ... } webRequestBlockin
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
Google Chrome Developer Tools - Google Code
Getting started Read the overview Watch our videos Read our blog posts Featured Video What is Chrome Developer Tools? The Google Chrome Developer Tools provide an integrated environment for debugging, optimizing, and understanding a web application, or website, running in Google Chrome. The developer tools are developed partly through the WebKit open source project, where the tools are called Web
Google ChromeのJavaScriptデバッガの進化がすごい - os0x.blog
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
javascript - Webkitでは$が定義済みな件 : 404 Blog Not Found
2010年09月09日13:00 カテゴリLightweight Languages javascript - Webkitでは$が定義済みな件 これに対する驚愕の事実。 [を] JavaScript のセレクターの定番イディオム JavaScript の定番イディオム。 function $(id) {return document.getElementById(id)} document.getElementById() の省略記法として $() を使うためのおまじない。 Google Chrome 6 の $ は function () { return document.getElementById.apply(document, arguments) } ですね。#JavaScriptless than a minute ago via Chromed Birdthink49 t
先取り！ Google Chrome Extensions 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
Google Chrome 4、Greasemonkeyをネイティブサポート
Firefox用に開発された拡張機能「Greasemonkey」が、Google Chrome 4に数クリックでインストールできるようになった。Chrome対応の拡張機能が4万近く増えたことになる。 米GoogleのWebブラウザ「Google Chrome 4」が、Firefoxの拡張機能「Greasemonkey」のユーザースクリプトにネイティブに対応した。Greasemonkeyの開発者で、現在Googleでソフトウエアエンジニアを務めるアーロン・ブードマン氏が2月1日、公式ブログで発表した。 Greasemonkeyは、シンプルなJavaScriptを使ってWebページをカスタマイズできるオープンソースのFirefox向け拡張機能。現在userscripts.orgに4万以上のスクリプトが登録されている。 スクリプトは拡張機能に変換されるので、ほかの拡張機能と同じように数クリックで
Google Chrome の JavaScript エンジン V8 を試す - IT戦記
（基本だらだら進行で、過程を追記していきます） Google Chrome が出ました Google Chrome で JavaScript エンジンが刷新されたということで、その JavaScript エンジン V8 についていろいろ調べてみようと思います。 Issues - v8 - V8 JavaScript Engine - Monorail ビルドしてみる まず、 svn からソースを持ってくる $ svn co http://v8.googlecode.com/svn/trunk/ v8おおお。以外と少ない で、 trunk の中に入って $ cd v8scons でビルド（scons が入ってない人は、 port や apt-get で入れる） $ scons scons: Reading SConscript files ... scons: done reading SC
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Kocal/vue-web-extension: 🛠️ A Vue CLI 3+ preset (previously a Vue CLI 2 boilerplate) for quickly starting a web extension with Vue, Babel, ESLint and more!
Extensions | Chrome for Developers
Engadget | Technology News & Reviews
TechCrunch | Startup and Technology News