Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
解決策をひとつ増やそう!ブラウザ拡張機能作成のススメ
Search
Masayuki Maekawa
December 09, 2023
Programming
1
550
解決策をひとつ増やそう!ブラウザ拡張機能作成のススメ
2023/12/09
合同勉強会 in 大都会岡山 -2023 Winter-
https://gbdaitokai.connpass.com/event/299345/
Masayuki Maekawa
December 09, 2023
Tweet
Share
More Decks by Masayuki Maekawa
See All by Masayuki Maekawa
拡張機能でええんちゃう?
maepon
1
600
UDフォントの話
maepon
0
400
箱ひげ図
maepon
0
600
Core Web Vitals についてあれやこれや
maepon
1
420
大規模サイトにおけるSEO観点でのURL設計
maepon
4
4k
ミーティングの「進行役」を考える
maepon
1
590
ミーティングの「進行役」考
maepon
1
590
DB使わずWordPressのデータ取得
maepon
0
590
JavaScriptの読み込みを考える〜場所、async、defer、その仕組みと使い所〜
maepon
3
2.7k
Other Decks in Programming
See All in Programming
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
940
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
3k
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
970
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
330
Claude Codeの使い方
ttnyt8701
1
130
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
A comprehensive view of refactoring
marabesi
0
970
Is Xcode slowly dying out in 2025?
uetyo
1
180
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
1
310
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
560
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
2
640
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Designing for humans not robots
tammielis
253
25k
Producing Creativity
orderedlist
PRO
346
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Practical Orchestrator
shlominoach
188
11k
Writing Fast Ruby
sferik
628
61k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Transcript
ղܾࡦΛͻͱͭ૿ͦ͏ʂ $ISPNF֦ுػೳ࡞ͷ εεϝ ߹ಉษڧձJOେձԬࢁ8JOUFS લণɹ
͡Ίʹ
͜ͷ͓ͷత w ʮ֦ுػೳͰղܾͰ͖Δͷ͋Γͦ͏ʯ w ʮ֦ுػೳ࡞Εͦ͏ʯ w ʮ֦ுػೳ࡞ͬͯΈΔ͔ʯ w ʮ࡞֦ͬͨுػೳετΞʹެ։ͯ͠ΈΔ͔ʯʢ˞ͦ͏ͳΕ͍͍ͳʣ
͓͠ͳ͕͖ w $ISPNF֦ுػೳͱʁ w ࣮ࡍʹ࡞ͬͨͷհ w ΄΅࠷খߏͷ$ISPNF֦ுػೳ w ࡞࣌ͷ5JQTΛ͍͔ͭ͘
લণ w ΣϒΫϦΤΠλʔζχϡʔεཧਓ w IUUQTXXXGBDFCPPLDPNHSPVQT w IUUQTUXJUUFSDPNXFCDSFJOGP w ઌपܴ͑·ͨ͠ w
$MBTTJגࣜձࣾιϑτΣΞΤϯδχΞ w ։ൃάϧʔϓϦʔμʔϓϩμΫτΦʔφʔ
$ISPNF֦ுػೳͱʁ
https://www.google.com/search?q=Chrome%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%81%A8%E3%81%AF%EF%BC%9F
https://chat.openai.com/share/98eb53e3-c9c0-4f32-8152-ba1ff4342d3a
࡞Γखઢͩͱछྨ ˞େཚʹݴͬͯ·͢ Σϒϖʔδͷ)5.-ʹ TDSJQUΛՃ͢Δ $ISPNFͷ"1*Λ͏ TDSJQUΛΈࠐΉ
࡞Γखઢͩͱछྨ ˞େཚʹݴͬͯ·͢ Σϒϖʔδͷ)5.-ʹ TDSJQUΛՃ͢Δ ͪ͜ΒͷΞϓϩʔνͩͱ ඇৗʹෑډ͕͍
࣮ࡍʹ࡞ͬͨͷհ
(PPHMF.FFU$IBU$MJQCPBSE w $MBTTJࣾͰͷʮ.FFUͷνϟοτͷอଘΕͨʂʯΛड͚ͯ w ίϐʔϘλϯͷՃ w ୀग़ϘλϯԡԼ࣌ʹΫϦοϓϘʔυʹࣗಈͰอଘ w λϒΛด͡Δ࣌ʹμΠΞϩά w
ʢࣾͰʣരέ https://chromewebstore.google.com/detail/google-meet-chat-to-clipb/djoaekihkgkgcgckfjakaekoiplcpoec?hl=ja
Σϒϖʔδͷ)5.-ʹTDSJQUΛՃ͢Δ
ଞʹετΞެ։͠ͳ͍ۀิॿ֦ுػೳ w ϝʔϧ৴4BB4ͷʮબΜ͡Ό͍͚ͳ͍ϥδΦϘλϯʯແޮԽ w จॻཧ4BB4͔Β༰Λύʔεͯࣾ͠γεςϜͷϦϯΫੜ w ςεταΠτͱຊ൪αΠτΛಉҰύεͰӾཡ͢Δ
΄΅࠷খߏͷ$ISPNF֦ுػೳ w IUUQTHJUIVCDPNNBFQPONJOFYUFOTJPO w )5.-ͷ4DSJQUՃํࣜͷʢ΄΅ʣ࠷খߏ
DISPNFFYUFOTJPOT σϕϩούʔϞʔυʹνΣοΫΛೖΕΕɺ ϑΥϧμΛ֦ுػೳͱͯ͠ಡΈࠐΊ·͢ɻ
NBOJGFTUKTPO { "manifest_version": 3, "name": "࠷খݶͷChrome֦ுػೳ", "version": "1.0", “description": "ϖʔδ্ͷHTMLΛมߋ͢Δ࠷খݶͷChrome֦ுػೳ",
"content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] } ] } ఆٛɾઃఆϑΝΠϧ
NBOJGFTUKTPO { "manifest_version": 3, "name": "࠷খݶͷChrome֦ுػೳ", "version": "1.0", “description": "ϖʔδ্ͷHTMLΛมߋ͢Δ࠷খݶͷChrome֦ுػೳ",
"content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] } ] } ఆٛɾઃఆϑΝΠϧ શͯͷΣϒϖʔδͰɺ DPOUFOUKTΛద༻͢Δ
DPOUFOUKT // content.js // ϖʔδ্ͷςΩετΛมߋ document.body.innerText = "Hello, Chrome֦ுػೳ!"; //
ུ ࣮ߦϑΝΠϧ
DPOUFOUKT // content.js // ϖʔδ্ͷςΩετΛมߋ document.body.innerText = "Hello, Chrome֦ுػೳ!"; //
ུ ࣮ߦϑΝΠϧ ڟѱ͗͢Δ
DPOUFOUKT // content.js // ϖʔδ্ͷςΩετΛมߋ // document.body.innerText = "Hello, Chrome֦ுػೳ!";
// DomContentLoad࣌ʹaλάͷtargetଐੑΛআ͢Δ function removeTarget() { const links = document.querySelectorAll('a[target]'); links.forEach((link) => { link.removeAttribute('target'); }); setTimeout(removeTarget, 500) } removeTarget(); ࣮ߦϑΝΠϧ ϖʔδશͯͷUBSHFUଐੑ ΛSFNPWF͢Δ
NBOJGFTUKTPO { "manifest_version": 3, "name": "࠷খݶͷChrome֦ுػೳ", "version": "1.0", “description": "ϖʔδ্ͷHTMLΛมߋ͢Δ࠷খݶͷChrome֦ுػೳ",
"content_scripts": [ { "matches": ["https://maepon.blog*"], "js": ["content.js"] } ] } ఆٛɾઃఆϑΝΠϧ ద༻͢ΔαΠτࢦఆͨ͠ํ ͕ແͰ͢ ʢਖ਼نදݱ͑ͳ͍ͣʣ
+BWB4DSJQUॻ͚Ε ͳΜͱ͔ͳΔ ؾ͕͖ͯ͠·ͤΜʁ
࡞࣌ͷ5JQTΛ͍͔ͭ͘ w DPOUFOUKT͕ಡΈࠐ·ΕΔͷ%0.$POUFOU-PBEFEͷޙ w MPDBM4USBHFී௨ʹ͑·͢ɻͨͩ͠ϖʔδͷυϝΠϯͷΈ w υϝΠϯΛ·͍ͨ͗ͨ߹ɺ$IPSNF"1*Λར༻͢Δ w 41"తͳͷ.VUBUJPO0CTFSWFSʹͱͯੈʹͳΓ·͢ w
࣌ʹJOUFSWBMճ͢͜ͱʜ
ؾΛ͚ͭΔ͜ͱ w 6*͍͡Δܥ%0.ΛͳΜͱ͔ηϨΫλۦͯ͠ཁૉΛ௫Ή w ͭ·ΓΫϥε໊มΘͬͨΒಈ͔ͳ͘ͳͬͨΓ w ͜Ε͔ΓͲ͏͠Α͏ͳ͍ w ηϨΫλͷৄࡉΛͲΕ͚ͩখ͘͞Ͱ͖Δ͔ͷউෛ w
ͱ͍͑ؤுͬͨͱ͜ΖͰɺͷੈքͰ͋Δ
ͥͻ4UPSFެ։Λ w ͬͯ͘Βͬͯྑ͍ͳɺͱ͍͏ͷੋඇετΞެ։Λ w $ISPNFͷετΞΛճ͑σϕϩούʔʹͳΕ·͢ w ΞΠίϯΞΠΩϟονը૾͕ඞཁɻ͕ΜΕʂ w &EHFͷ֦ுػೳετΞ͋Γ·͢ w
ͪ͜ΒແྉʢͰ$ISPNFΑΓෑډߴ͍ײ͡ʣ
͋Γ͕ͱ͏͍͟͝·ͨ͠