インターンシップをさせていただいた田中です。
今回はインターンシップでの開発で使った技術についてまとめます。
すでに詳しい解説をしている記事が多くあるので、概要をまとめ、私が詰まった点を挙げます。

背景

今回のインターンシップの課題は「Tech Blogブログを広める」ことでした。
私たちのチームは、この課題をクリアするにはブログのコンテンツを増やすことが重要だと考え、「ブログの執筆を楽にするツール」を開発することにしました。
開発期間、ユーザーエクスペリエンス、運用などの観点から、今回は Google Chrome の拡張機能(Extension)として開発を行いました 。
バックエンドとして本文を解析するAPIを Azure Logic Apps で開発したのですが、私はフロントエンドを担当したのでChromeの拡張機能について書きます。

Chrome 拡張機能

Chrome拡張機能は以下の要素で構成されます。
・manifest.json
・HTML
・CSS
・JavaScript

"manifest.json"は必須で拡張機能を定義します。
HTMLはポップアップなどに使用します。
CSSはHTMLのスタイルを設定できます。
JavaScriptはプログラム本体で、
開いているページで実行される"content_scripts"、
常に実行されている"background",
ポップアップやほかのスクリプトから読み込まれるその他に分類されます。

ここで重要なのは、開いているページに対してDOM操作ができるのは"content_scripts"だけだということです。
例としてにWordPressの編集画面でのみ"content.js"を実行したいときの"manifest.json"は以下のようになります。

{
  "manifest_version": 2,
  "name": "拡張機能の名前",
  "version": "0.1",
  "description": "拡張機能の説明",
  "permissions": ["tabs"],
  "content_scripts": [{
    "matches": ["*://*/wp-admin/post*"],
    "js": ["content.js"],
    "css": ["content.css"],
    "run_at": "document_end"
  }]
}

上のコードでは"content.css"も併せて読み込んでいるのですが、このCSSはワードプレスの編集画面に影響を及ぼすためタグ名に対してスタイルを定義すると、編集画面のレイアウトが崩れます（実際に崩れました）。そのため、必ずクラスかIDを使用する必要があります。

また、スクリプトを実行するタイミングを指定しないと意図した動作にならない場合があります。その場合"run_at":でスクリプトを読み込むタイミングを指定できます。

最後に

書きたい内容や詰まった点は他にもたくさんありますが、
執筆に費やせる時間があまりなかったため中途半端で薄い内容になってしまいました。
しかし、開発のほうは良いものができました。
二週間という短い期間でしたが、貴重な体験となりました。
ありがとうございました。