Submit Search
Upload
モダンな感じでChrome Extension作ってみた
•
2 likes
•
1,832 views
Takumi Murano
Follow
LT slide at Kanazawa.rb meetup #40
Read less
Read more
Technology
Report
Share
Report
Share
1 of 17
Download now
Download to read offline
Recommended
Flash Playerの作り方
Flash Playerの作り方
Yu Kobayashi
Vimから見たemacs
Vimから見たemacs
Shougo
Make
Make
lnial
Vim = VM
Vim = VM
Shougo
JasmineによるJavascriptテスト駆動開発
JasmineによるJavascriptテスト駆動開発
Yoichi Toyota
Nodejs
Nodejs
和樹 川端
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
Kiyoshi Sawada
Compare Japanese Fonts
Compare Japanese Fonts
Yasunobu Okamura
Recommended
Flash Playerの作り方
Flash Playerの作り方
Yu Kobayashi
Vimから見たemacs
Vimから見たemacs
Shougo
Make
Make
lnial
Vim = VM
Vim = VM
Shougo
JasmineによるJavascriptテスト駆動開発
JasmineによるJavascriptテスト駆動開発
Yoichi Toyota
Nodejs
Nodejs
和樹 川端
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
Kiyoshi Sawada
Compare Japanese Fonts
Compare Japanese Fonts
Yasunobu Okamura
VimM#3
VimM#3
Yuki Akamatsu
neovim = VM
neovim = VM
Shougo
暗黒美夢王とEmacs
暗黒美夢王とEmacs
Shougo
modern X86 environment
modern X86 environment
Shougo
Playで作るwebsocketサーバ
Playで作るwebsocketサーバ
ke-m kamekoopa
Mbed2013
Mbed2013
lynxeyed
play framework 勉強会 in 関西
play framework 勉強会 in 関西
Shinichi Kozake
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
Shougo
Unite vim
Unite vim
Shougo
エディタ戦争
エディタ戦争
Akira Hagiwara
Phpstormをつかいはじめました〜序〜 #sa_study
Phpstormをつかいはじめました〜序〜 #sa_study
Hikari Fukasawa
PHP7実環境ベンチ2016春
PHP7実環境ベンチ2016春
Ryo Tomidokoro
CLR/H第54回勉強会 ライトニングトーク
CLR/H第54回勉強会 ライトニングトーク
Jun-ichi Sakamoto
WordBench Nagoya 2015年3月勉強会
WordBench Nagoya 2015年3月勉強会
Kei Nomura
node.js
node.js
Masataka Ohara
Play frameworkについて
Play frameworkについて
Shinobu Okano
Xml rpc を使ってブログ投稿
Xml rpc を使ってブログ投稿
Fumito Mizuno
mrubyでゲームを書いてみた
mrubyでゲームを書いてみた
Yousuke Kuroda
webアプリケーションフレームワークの話
webアプリケーションフレームワークの話
Yoshihiro Ura
Varnish
Varnish
Ayako Hatori
Chrome extension入門
Chrome extension入門
pakutoma
微妙なサイトを自分好みに勝手に改造しちゃおう! ※Chromeの拡張機能で
微妙なサイトを自分好みに勝手に改造しちゃおう! ※Chromeの拡張機能で
Tomoko Sato
More Related Content
What's hot
VimM#3
VimM#3
Yuki Akamatsu
neovim = VM
neovim = VM
Shougo
暗黒美夢王とEmacs
暗黒美夢王とEmacs
Shougo
modern X86 environment
modern X86 environment
Shougo
Playで作るwebsocketサーバ
Playで作るwebsocketサーバ
ke-m kamekoopa
Mbed2013
Mbed2013
lynxeyed
play framework 勉強会 in 関西
play framework 勉強会 in 関西
Shinichi Kozake
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
Shougo
Unite vim
Unite vim
Shougo
エディタ戦争
エディタ戦争
Akira Hagiwara
Phpstormをつかいはじめました〜序〜 #sa_study
Phpstormをつかいはじめました〜序〜 #sa_study
Hikari Fukasawa
PHP7実環境ベンチ2016春
PHP7実環境ベンチ2016春
Ryo Tomidokoro
CLR/H第54回勉強会 ライトニングトーク
CLR/H第54回勉強会 ライトニングトーク
Jun-ichi Sakamoto
WordBench Nagoya 2015年3月勉強会
WordBench Nagoya 2015年3月勉強会
Kei Nomura
node.js
node.js
Masataka Ohara
Play frameworkについて
Play frameworkについて
Shinobu Okano
Xml rpc を使ってブログ投稿
Xml rpc を使ってブログ投稿
Fumito Mizuno
mrubyでゲームを書いてみた
mrubyでゲームを書いてみた
Yousuke Kuroda
webアプリケーションフレームワークの話
webアプリケーションフレームワークの話
Yoshihiro Ura
Varnish
Varnish
Ayako Hatori
What's hot
(20)
VimM#3
VimM#3
neovim = VM
neovim = VM
暗黒美夢王とEmacs
暗黒美夢王とEmacs
modern X86 environment
modern X86 environment
Playで作るwebsocketサーバ
Playで作るwebsocketサーバ
Mbed2013
Mbed2013
play framework 勉強会 in 関西
play framework 勉強会 in 関西
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
Unite vim
Unite vim
エディタ戦争
エディタ戦争
Phpstormをつかいはじめました〜序〜 #sa_study
Phpstormをつかいはじめました〜序〜 #sa_study
PHP7実環境ベンチ2016春
PHP7実環境ベンチ2016春
CLR/H第54回勉強会 ライトニングトーク
CLR/H第54回勉強会 ライトニングトーク
WordBench Nagoya 2015年3月勉強会
WordBench Nagoya 2015年3月勉強会
node.js
node.js
Play frameworkについて
Play frameworkについて
Xml rpc を使ってブログ投稿
Xml rpc を使ってブログ投稿
mrubyでゲームを書いてみた
mrubyでゲームを書いてみた
webアプリケーションフレームワークの話
webアプリケーションフレームワークの話
Varnish
Varnish
Viewers also liked
Chrome extension入門
Chrome extension入門
pakutoma
微妙なサイトを自分好みに勝手に改造しちゃおう! ※Chromeの拡張機能で
微妙なサイトを自分好みに勝手に改造しちゃおう! ※Chromeの拡張機能で
Tomoko Sato
Media programing2012
Media programing2012
y42sora
Gitの使い方(rabese -i編)
Gitの使い方(rabese -i編)
y42sora
Oak Park
Oak Park
Chelsea Smith
Chrome Extensionsの基本とデザインパターン
Chrome Extensionsの基本とデザインパターン
Yoichiro Tanaka
Chrome Extensionsから見るWebExtensions
Chrome Extensionsから見るWebExtensions
Yoichiro Tanaka
Chrome 拡張のご紹介
Chrome 拡張のご紹介
Tetsunosuke Saito
Chromeウェブストア - Html5とか勉強会42
Chromeウェブストア - Html5とか勉強会42
Yoichiro Tanaka
Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
[db tech showcase Tokyo 2016] B22: 超高速NoSQLデータベースと超高速SSDの融合 by Aerospike Inc....
[db tech showcase Tokyo 2016] B22: 超高速NoSQLデータベースと超高速SSDの融合 by Aerospike Inc....
Insight Technology, Inc.
eZ Publishのextension開発チュートリアル
eZ Publishのextension開発チュートリアル
株式会社ミツエーリンクス
ChatWorkではじめるChrome Extensionもぐもぐ会
ChatWorkではじめるChrome Extensionもぐもぐ会
cw-ozaki
WebSocketでリアルタイム処理をする
WebSocketでリアルタイム処理をする
龍一 田中
CSPの話〜FxOSチューン☆〜
CSPの話〜FxOSチューン☆〜
Yu Yagihashi
Viewers also liked
(15)
Chrome extension入門
Chrome extension入門
微妙なサイトを自分好みに勝手に改造しちゃおう! ※Chromeの拡張機能で
微妙なサイトを自分好みに勝手に改造しちゃおう! ※Chromeの拡張機能で
Media programing2012
Media programing2012
Gitの使い方(rabese -i編)
Gitの使い方(rabese -i編)
Oak Park
Oak Park
Chrome Extensionsの基本とデザインパターン
Chrome Extensionsの基本とデザインパターン
Chrome Extensionsから見るWebExtensions
Chrome Extensionsから見るWebExtensions
Chrome 拡張のご紹介
Chrome 拡張のご紹介
Chromeウェブストア - Html5とか勉強会42
Chromeウェブストア - Html5とか勉強会42
Chrome Apps 概要
Chrome Apps 概要
[db tech showcase Tokyo 2016] B22: 超高速NoSQLデータベースと超高速SSDの融合 by Aerospike Inc....
[db tech showcase Tokyo 2016] B22: 超高速NoSQLデータベースと超高速SSDの融合 by Aerospike Inc....
eZ Publishのextension開発チュートリアル
eZ Publishのextension開発チュートリアル
ChatWorkではじめるChrome Extensionもぐもぐ会
ChatWorkではじめるChrome Extensionもぐもぐ会
WebSocketでリアルタイム処理をする
WebSocketでリアルタイム処理をする
CSPの話〜FxOSチューン☆〜
CSPの話〜FxOSチューン☆〜
Similar to モダンな感じでChrome Extension作ってみた
[社内勉強会]ELBとALBと数万スパイク負荷テスト
[社内勉強会]ELBとALBと数万スパイク負荷テスト
Takahiro Moteki
TypeScriptへの入口
TypeScriptへの入口
Sunao Tomita
Hello, C++ + JavaScript World! - Boost.勉強会 #11 東京
Hello, C++ + JavaScript World! - Boost.勉強会 #11 東京
hecomi
Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門
Narami Kiyokura
JSer Class #2
JSer Class #2
mizuky fujitani
Javakuche yono
Javakuche yono
yono05
17 E-5 震災とHackとクラウドと ━ URIベースのCSLB
17 E-5 震災とHackとクラウドと ━ URIベースのCSLB
Yuki KAN
Haikara
Haikara
jewel12
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
Type scriptmemo
Type scriptmemo
ytanno
.NET vNext
.NET vNext
信之 岩永
.NET Compiler Platform
.NET Compiler Platform
信之 岩永
Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...
Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...
mganeko
MediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live Streaming
mganeko
Xcore introduction
Xcore introduction
Akira Tanaka
このべん第二回 ~「できない子ほどかわいくしたい!ConoHa補完計画」勉強会
このべん第二回 ~「できない子ほどかわいくしたい!ConoHa補完計画」勉強会
ConoHa, GMO INTERNET
Jenkins + awsで並列テスト
Jenkins + awsで並列テスト
Yamamoto Kazuhisa
WebRTCでドラゴンボールごっこ
WebRTCでドラゴンボールごっこ
girigiribauer
便利で危険なnpm install
便利で危険なnpm install
kouzouman
勉強会20140207
勉強会20140207
Shugo Numano
Similar to モダンな感じでChrome Extension作ってみた
(20)
[社内勉強会]ELBとALBと数万スパイク負荷テスト
[社内勉強会]ELBとALBと数万スパイク負荷テスト
TypeScriptへの入口
TypeScriptへの入口
Hello, C++ + JavaScript World! - Boost.勉強会 #11 東京
Hello, C++ + JavaScript World! - Boost.勉強会 #11 東京
Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門
JSer Class #2
JSer Class #2
Javakuche yono
Javakuche yono
17 E-5 震災とHackとクラウドと ━ URIベースのCSLB
17 E-5 震災とHackとクラウドと ━ URIベースのCSLB
Haikara
Haikara
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
Type scriptmemo
Type scriptmemo
.NET vNext
.NET vNext
.NET Compiler Platform
.NET Compiler Platform
Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...
Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...
MediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live Streaming
Xcore introduction
Xcore introduction
このべん第二回 ~「できない子ほどかわいくしたい!ConoHa補完計画」勉強会
このべん第二回 ~「できない子ほどかわいくしたい!ConoHa補完計画」勉強会
Jenkins + awsで並列テスト
Jenkins + awsで並列テスト
WebRTCでドラゴンボールごっこ
WebRTCでドラゴンボールごっこ
便利で危険なnpm install
便利で危険なnpm install
勉強会20140207
勉強会20140207
More from Takumi Murano
Dockerぐらし!
Dockerぐらし!
Takumi Murano
金大アルゴリズム勉強会#007資料
金大アルゴリズム勉強会#007資料
Takumi Murano
金大アルゴリズム勉強会#006資料
金大アルゴリズム勉強会#006資料
Takumi Murano
Operator's Side
Operator's Side
Takumi Murano
金大アルゴリズム勉強会#005資料
金大アルゴリズム勉強会#005資料
Takumi Murano
金大アルゴリズム勉強会#004資料
金大アルゴリズム勉強会#004資料
Takumi Murano
金大アルゴリズム勉強会#003資料
金大アルゴリズム勉強会#003資料
Takumi Murano
金大アルゴリズム勉強会#002資料
金大アルゴリズム勉強会#002資料
Takumi Murano
金大アルゴリズム勉強会#001資料
金大アルゴリズム勉強会#001資料
Takumi Murano
Lombok java
Lombok java
Takumi Murano
More from Takumi Murano
(10)
Dockerぐらし!
Dockerぐらし!
金大アルゴリズム勉強会#007資料
金大アルゴリズム勉強会#007資料
金大アルゴリズム勉強会#006資料
金大アルゴリズム勉強会#006資料
Operator's Side
Operator's Side
金大アルゴリズム勉強会#005資料
金大アルゴリズム勉強会#005資料
金大アルゴリズム勉強会#004資料
金大アルゴリズム勉強会#004資料
金大アルゴリズム勉強会#003資料
金大アルゴリズム勉強会#003資料
金大アルゴリズム勉強会#002資料
金大アルゴリズム勉強会#002資料
金大アルゴリズム勉強会#001資料
金大アルゴリズム勉強会#001資料
Lombok java
Lombok java
Recently uploaded
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
Recently uploaded
(14)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
モダンな感じでChrome Extension作ってみた
1.
モダンな感じで Chrome Extension 作ってみた t_murano Kanazawa.rb meetup
#40
2.
自己紹介 • t_murano (@k242hd_akg) •
社会人1年目 • Vimmer • ISUCON出たりたまに競プロやってたり…
3.
最近こんなの作ってた
4.
5.
アプリは置いておいて モダンな話
6.
使ってる技術とか Babel npm Webpack jsdom Sinon.JS power-assert mocha React ES6
7.
使ってる技術とか Babel npm Webpack jsdom Sinon.JS power-assert mocha React ES6 テスト関係 言語関係 ※無理やり分類するとこんな感じ View関係
8.
言語関係は
9.
1. npmで必要なパッケージを取得 2. ES6でコードを書く 3.
Babelでトランスパイル 4. Webpackでガッチャンコ
10.
以上!
11.
テストツール • mocha :
test framework • power-assert : assertion library • Sinon.JS : test double • jsdom : DOM simulator
12.
jsdom • 昔はブラウザ上でテストしてた(…らしい) • ブラウザではなくNode.js上でDOMを構築 •
CLIで結構テストが走る → 楽ちん
13.
React • JUST THE
UI • Virtual DOM (あんまり意識しないと思う) • DOMの変更や構造が把握しやすくなる
14.
2つのComponent inputのeventをcatch 定義しておいた props (I/F) ラベルを変更
15.
アプリ作って思ったこと • ChromeExtensionでも基本的にはSPA等と変わ らないので、モダンな技術が使える • Reactとjsdomでテスト書きやすい感じ •
Google先生を相手にすると厄介
16.
まとめ • モダン化いいね
17.
おわり
Download now