[{"data":1,"prerenderedAt":660},["ShallowReactive",2],{"content-/chrome-extension-code-review-refactoring":3,"all-pages-for-dir":658,"og-image-/chrome-extension-code-review-refactoring":659},{"id":4,"title":5,"body":6,"category":638,"description":639,"extension":640,"meta":641,"navigation":642,"ogImage":643,"path":644,"project_name":645,"published":646,"publishedAt":647,"seo":648,"stem":649,"tags":650,"todo":656,"unpublished":646,"updatedAt":643,"__hash__":657},"pages/2026-03/2026-03-27/chrome-extension-code-review-refactoring.md","Chrome拡張クラウド会計連携 - 3エージェント並列コードレビューと4400行content.jsのモジュール分割",{"type":7,"value":8,"toc":617},"minimark",[9,14,18,21,26,29,32,34,38,48,57,69,76,80,91,300,304,318,320,324,372,374,378,381,383,387,390,393,481,492,494,498,513,517,524,585,588,590,593,596,598,601,604,610,613],[10,11,13],"h1",{"id":12},"chrome拡張クラウド会計連携-コードレビューとモジュール分割","Chrome拡張クラウド会計連携 - コードレビューとモジュール分割",[15,16,17],"p",{},"3つのレビューエージェントを並列に走らせて会計ソフトA連携Chrome拡張をレビューし、Critical 4件・High 6件・Medium 6件の指摘が返ってきた。修正を片付けた後、4400行のcontent.jsを5ファイルに分割した。分割作業中にXSS修正で埋め込んだバグが1つ見つかり、再発防止のテストまで入れて一日が終わった。",[19,20],"hr",{},[22,23,25],"h2",{"id":24},"_3エージェント並列コードレビュー","3エージェント並列コードレビュー",[15,27,28],{},"content.js（4440行）、popup.js、background.jsの3ファイルを、それぞれ別のレビューエージェントに投げた。プロンプトには「セキュリティ」「エラーハンドリング」「保守性」の観点を指定。3つが同時に走って、数分で結果が揃った。",[15,30,31],{},"Codexにもレビューを投げたが、サンドボックスポリシーに引っかかってファイルを読めなかった。ファイルパスを渡しても「アクセスできません」が返ってくるだけで、レビュー以前の問題だった。Claude Codeのサブエージェントが主力になった。",[19,33],{},[22,35,37],{"id":36},"critical-4件-即座に修正","Critical 4件 - 即座に修正",[39,40,42,43,47],"h3",{"id":41},"_1-二重実行防止-responded-true-の早期セット","1. 二重実行防止: ",[44,45,46],"code",{},"responded = true"," の早期セット",[15,49,50,51,53,54,56],{},"メッセージハンドラで非同期処理の途中に ",[44,52,46],{}," をセットしていた。処理が完了する前に次のメッセージが来ると、同じ処理が二重に走る。",[44,55,46],{}," をハンドラの先頭に移動した。",[39,58,60,61,64,65,68],{"id":59},"_2-switchyearbycti-の-resok-チェック漏れ","2. ",[44,62,63],{},"switchYearByCti"," の ",[44,66,67],{},"res.ok"," チェック漏れ",[15,70,71,72,75],{},"年度切り替えのfetchで、レスポンスのステータスを確認せずにそのまま処理を続けていた。404が返ってきても正常系として流れる状態だった。",[44,73,74],{},"if (!res.ok)"," のガードを追加。",[39,77,79],{"id":78},"_3-innerhtml経由のxss対策","3. innerHTML経由のXSS対策",[15,81,82,83,86,87,90],{},"ユーザー入力を含む文字列がinnerHTMLにそのまま流れ込んでいた。事業者名に",[44,84,85],{},"\u003Cscript>","を仕込めば動く状態。",[44,88,89],{},"escapeHtml","関数を作り、テンプレートリテラルに埋め込む変数を全てエスケープした。",[92,93,98],"pre",{"className":94,"code":95,"language":96,"meta":97,"style":97},"language-javascript shiki shiki-themes vitesse-light vitesse-light","const escapeHtml = (str) =>\n  String(str)\n    .replace(/&/g, '&')\n    .replace(/\u003C/g, '<')\n    .replace(/>/g, '>')\n    .replace(/\"/g, '"')\n    .replace(/'/g, ''');\n","javascript","",[44,99,100,130,144,184,213,242,271],{"__ignoreMap":97},[101,102,105,109,113,117,120,124,127],"span",{"class":103,"line":104},"line",1,[101,106,108],{"class":107},"stQ0i","const",[101,110,112],{"class":111},"senZ8"," escapeHtml",[101,114,116],{"class":115},"shFtX"," =",[101,118,119],{"class":115}," (",[101,121,123],{"class":122},"s4oTP","str",[101,125,126],{"class":115},")",[101,128,129],{"class":115}," =>\n",[101,131,133,136,139,141],{"class":103,"line":132},2,[101,134,135],{"class":111},"  String",[101,137,138],{"class":115},"(",[101,140,123],{"class":122},[101,142,143],{"class":115},")\n",[101,145,147,150,153,155,159,163,165,169,172,175,179,182],{"class":103,"line":146},3,[101,148,149],{"class":115},"    .",[101,151,152],{"class":111},"replace",[101,154,138],{"class":115},[101,156,158],{"class":157},"sMJiu","/",[101,160,162],{"class":161},"sLkVR","&",[101,164,158],{"class":157},[101,166,168],{"class":167},"sHkkW","g",[101,170,171],{"class":115},",",[101,173,174],{"class":157}," '",[101,176,178],{"class":177},"sdGka","&",[101,180,181],{"class":157},"'",[101,183,143],{"class":115},[101,185,187,189,191,193,195,198,200,202,204,206,209,211],{"class":103,"line":186},4,[101,188,149],{"class":115},[101,190,152],{"class":111},[101,192,138],{"class":115},[101,194,158],{"class":157},[101,196,197],{"class":161},"\u003C",[101,199,158],{"class":157},[101,201,168],{"class":167},[101,203,171],{"class":115},[101,205,174],{"class":157},[101,207,208],{"class":177},"<",[101,210,181],{"class":157},[101,212,143],{"class":115},[101,214,216,218,220,222,224,227,229,231,233,235,238,240],{"class":103,"line":215},5,[101,217,149],{"class":115},[101,219,152],{"class":111},[101,221,138],{"class":115},[101,223,158],{"class":157},[101,225,226],{"class":161},">",[101,228,158],{"class":157},[101,230,168],{"class":167},[101,232,171],{"class":115},[101,234,174],{"class":157},[101,236,237],{"class":177},">",[101,239,181],{"class":157},[101,241,143],{"class":115},[101,243,245,247,249,251,253,256,258,260,262,264,267,269],{"class":103,"line":244},6,[101,246,149],{"class":115},[101,248,152],{"class":111},[101,250,138],{"class":115},[101,252,158],{"class":157},[101,254,255],{"class":161},"\"",[101,257,158],{"class":157},[101,259,168],{"class":167},[101,261,171],{"class":115},[101,263,174],{"class":157},[101,265,266],{"class":177},""",[101,268,181],{"class":157},[101,270,143],{"class":115},[101,272,274,276,278,280,282,284,286,288,290,292,295,297],{"class":103,"line":273},7,[101,275,149],{"class":115},[101,277,152],{"class":111},[101,279,138],{"class":115},[101,281,158],{"class":157},[101,283,181],{"class":161},[101,285,158],{"class":157},[101,287,168],{"class":167},[101,289,171],{"class":115},[101,291,174],{"class":157},[101,293,294],{"class":177},"'",[101,296,181],{"class":157},[101,298,299],{"class":115},");\n",[39,301,303],{"id":302},"_4-message-handlerのsender未検証","4. message handlerのsender未検証",[15,305,306,309,310,313,314,317],{},[44,307,308],{},"chrome.runtime.onMessage","のリスナーで、",[44,311,312],{},"sender","の検証をしていなかった。任意の拡張機能やページからメッセージを送り込める状態だった。",[44,315,316],{},"sender.id === chrome.runtime.id"," のチェックを追加。",[19,319],{},[22,321,323],{"id":322},"high-6件","High 6件",[325,326,327,335,345,351,357,363],"ul",{},[328,329,330,334],"li",{},[331,332,333],"strong",{},"fetchCsvのタイムアウト未設定",": AbortControllerで30秒タイムアウトを追加",[328,336,337,340,341,344],{},[331,338,339],{},"拡張URLのハードコード",": ",[44,342,343],{},"chrome.runtime.getURL()"," に置き換え",[328,346,347,350],{},[331,348,349],{},"parseImportFormResponseのエラー検知が広すぎる",": エラー判定条件を具体化し、正常なレスポンスを誤検知しないように修正",[328,352,353,356],{},[331,354,355],{},"バリデーション関数の接続",": レビュー指摘で接続したが、後に運用でノイズが多すぎると判断して削除（後述）",[328,358,359,362],{},[331,360,361],{},"スクレイピングロジックの二重実装",": content.jsとlib.jsに同じパース処理が存在していた。lib.js側に統一",[328,364,365,340,368,371],{},[331,366,367],{},"saveEntitySettingのread-modify-writeレース",[44,369,370],{},"chrome.storage.local","の読み→加工→書きが非同期で、同時に呼ばれると後勝ちで先の変更が消える。ロック機構を追加",[19,373],{},[22,375,377],{"id":376},"medium-6件","Medium 6件",[15,379,380],{},"CTI復帰追跡の状態管理、loadAllクリック上限の設定、resolveSheetNamesのサフィックス衝突回避、fetchCsvの不要ダウンロード防止、UNFILTERED配列の重複排除、buildMultiEntityConfirmMessageの可読性改善。いずれも局所的な修正で対応。",[19,382],{},[22,384,386],{"id":385},"_4400行contentjsを5ファイルに分割","4400行content.jsを5ファイルに分割",[15,388,389],{},"レビュー指摘の修正が一通り終わった後、content.jsの分割に着手した。",[39,391,392],{"id":392},"分割構成",[394,395,396,412],"table",{},[397,398,399],"thead",{},[400,401,402,406,409],"tr",{},[403,404,405],"th",{},"ファイル",[403,407,408],{},"責務",[403,410,411],{},"行数目安",[413,414,415,429,442,455,468],"tbody",{},[400,416,417,423,426],{},[418,419,420],"td",{},[44,421,422],{},"storage.js",[418,424,425],{},"chrome.storage.localの読み書き、設定管理",[418,427,428],{},"~300",[400,430,431,436,439],{},[418,432,433],{},[44,434,435],{},"bridge.js",[418,437,438],{},"popup/backgroundとのメッセージ通信",[418,440,441],{},"~400",[400,443,444,449,452],{},[418,445,446],{},[44,447,448],{},"export.js",[418,450,451],{},"スプレッドシートへのエクスポート処理",[418,453,454],{},"~800",[400,456,457,462,465],{},[418,458,459],{},[44,460,461],{},"import.js",[418,463,464],{},"CSVインポート、フォーム操作",[418,466,467],{},"~600",[400,469,470,475,478],{},[418,471,472],{},[44,473,474],{},"content.js",[418,476,477],{},"DOM操作、スクレイピング、メインロジック",[418,479,480],{},"~2300",[15,482,483,484,487,488,491],{},"manifest.jsonの",[44,485,486],{},"content_scripts","にファイルを追加し、読み込み順序を ",[44,489,490],{},"storage → bridge → export → import → content"," に設定。グローバル変数の依存関係を整理して、前段のファイルで定義した変数を後段が参照する形にした。",[19,493],{},[22,495,497],{"id":496},"escapednameバグの発見と修正","escapedNameバグの発見と修正",[15,499,500,501,504,505,508,509,512],{},"XSS対策でescapeHtml関数を追加した際、元々あった",[44,502,503],{},"escapedName","変数を削除していた。しかし、テンプレートリテラル内で",[44,506,507],{},"${escapedName}","を参照している箇所が残っていた。JavaScriptはテンプレートリテラル内の未定義変数をエラーにせず、",[44,510,511],{},"undefined","という文字列にする。画面に「undefined」が表示されて初めて気づいた。",[39,514,516],{"id":515},"再発防止-テンプレートリテラル内の未定義変数を静的検知するテスト","再発防止: テンプレートリテラル内の未定義変数を静的検知するテスト",[15,518,519,520,523],{},"テンプレートリテラルから",[44,521,522],{},"${...}","を抽出し、スコープ内で定義されていない変数名がないかチェックするテストを追加した。正規表現でソースコードを走査し、未定義の変数参照を検出する。",[92,525,527],{"className":94,"code":526,"language":96,"meta":97,"style":97},"// テンプレートリテラル内の変数参照を抽出して検証\nconst templateVarPattern = /\\$\\{([^}]+)\\}/g;\n// 各ファイルのトップレベル変数・関数引数と照合\n",[44,528,529,535,580],{"__ignoreMap":97},[101,530,531],{"class":103,"line":104},[101,532,534],{"class":533},"sxvE3","// テンプレートリテラル内の変数参照を抽出して検証\n",[101,536,537,539,542,544,547,551,554,557,561,564,568,570,573,575,577],{"class":103,"line":132},[101,538,108],{"class":107},[101,540,541],{"class":122}," templateVarPattern",[101,543,116],{"class":115},[101,545,546],{"class":157}," /",[101,548,550],{"class":549},"svWSF","\\$\\{",[101,552,553],{"class":115},"([",[101,555,556],{"class":107},"^",[101,558,560],{"class":559},"snbK4","}",[101,562,563],{"class":115},"]",[101,565,567],{"class":566},"sM54T","+",[101,569,126],{"class":115},[101,571,572],{"class":549},"\\}",[101,574,158],{"class":157},[101,576,168],{"class":167},[101,578,579],{"class":115},";\n",[101,581,582],{"class":103,"line":146},[101,583,584],{"class":533},"// 各ファイルのトップレベル変数・関数引数と照合\n",[15,586,587],{},"このテストがあれば、変数を削除・リネームした際に参照が残っていればCIで検出できる。",[19,589],{},[22,591,592],{"id":592},"バリデーション関数の接続と撤去",[15,594,595],{},"レビューでHigh指摘だった「バリデーション関数が定義されているが呼ばれていない」を受けて、エクスポート前にバリデーションを実行するように接続した。しかし実際に動かすと、会計ソフトAのデータは例外パターンだらけで、正常なデータでも警告が出続けた。毎回「無視」を押す作業が増えただけだったので、バリデーション実行部分を削除した。関数定義自体はlib.jsに残してあるので、将来必要になれば再接続できる。",[19,597],{},[22,599,600],{"id":600},"振り返り",[15,602,603],{},"3エージェント並列レビューは、1ファイルずつ順番にレビューするより待ち時間が短く、観点の偏りも減った。ただし3つの結果をマージする作業は手動で、重複指摘の整理に時間がかかった。",[15,605,606,607,609],{},"escapedNameバグは、XSSを潰す修正が別のバグを埋め込んだ形だった。テンプレートリテラルが未定義変数を黙って",[44,608,511],{},"にするJavaScriptの挙動に足を掬われた。静的検知テストを入れたので、同じパターンは今後CIが拾ってくれる。",[15,611,612],{},"content.jsの分割は、レビュー→修正→分割の順番が正解だった。先に分割してからレビュー修正を入れると、修正箇所がどのファイルに移動したか追跡するコストが増える。",[614,615,616],"style",{},"html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sLkVR, html code.shiki .sLkVR{--shiki-default:#AB5E3F;--shiki-dark:#AB5E3F}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .svWSF, html code.shiki .svWSF{--shiki-default:#BDA437;--shiki-dark:#BDA437}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}",{"title":97,"searchDepth":132,"depth":132,"links":618},[619,620,628,629,630,633,636,637],{"id":24,"depth":132,"text":25},{"id":36,"depth":132,"text":37,"children":621},[622,624,626,627],{"id":41,"depth":146,"text":623},"1. 二重実行防止: responded = true の早期セット",{"id":59,"depth":146,"text":625},"2. switchYearByCti の res.ok チェック漏れ",{"id":78,"depth":146,"text":79},{"id":302,"depth":146,"text":303},{"id":322,"depth":132,"text":323},{"id":376,"depth":132,"text":377},{"id":385,"depth":132,"text":386,"children":631},[632],{"id":392,"depth":146,"text":392},{"id":496,"depth":132,"text":497,"children":634},[635],{"id":515,"depth":146,"text":516},{"id":592,"depth":132,"text":592},{"id":600,"depth":132,"text":600},"dev","会計ソフトA連携Chrome拡張のコードレビューを3エージェント並列で実施しCritical4件・High6件・Medium6件を修正。4400行のcontent.jsを5ファイルに分割し、テンプレートリテラル内の未定義変数を静的検知するテストを追加","md",{},true,null,"/chrome-extension-code-review-refactoring","claude-code-tools",false,"2026-03-27T00:00:00.000Z",{"title":5,"description":639},"2026-03/2026-03-27/chrome-extension-code-review-refactoring",[651,652,653,654,655],"Chrome拡張機能","クラウド会計","コードレビュー","リファクタリング","セキュリティ","memo","duL4t8PJug6e2hjOgR7Afnc6GKACk8F35wco0rs_rb0",[],"https://log.eurekapu.com/og/blog/chrome-extension-code-review-refactoring.png?v=2026-03-27T00%3A00%3A00.000Z&title=Chrome%E6%8B%A1%E5%BC%B5%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E4%BC%9A%E8%A8%88%E9%80%A3%E6%90%BA%20-%203%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88%E4%B8%A6%E5%88%97%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%81%A84400%E8%A1%8Ccontent.js%E3%81%AE%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E5%88%86%E5%89%B2&author=Kei%20Komatsu&sig=5801e727cc4b5edc",1782528821248]