## プロジェクト作成
[[Tailwind CSS]]を使いたいので以下を参考に。
<div class="link-card">
<div class="link-card-header">
<img src="https://docs.plasmo.com/favicons/favicon-32x32.png" class="link-card-site-icon"/>
<span class="link-card-site-name">Plasmo Docs</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<p class="link-card-title">Quickstart with TailwindCSS – Plasmo</p>
<p class="link-card-description">A quick guide on how to use Tailwind CSS in your browser extension.</p>
</div>
<img src="https://docs.plasmo.com/images/seo-1200-700.png" class="link-card-image" />
</div>
<a href="https://docs.plasmo.com/quickstarts/with-tailwindcss"></a>
</div>
```console
npm create plasmo --with-tailwindcss
```
なぜか通常インストールになっているの手動で...
```console
npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init
```
`postcss.config.js`
```js
/**
* @type {import('postcss').ProcessOptions}
*/
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
```
`tailwind.config.js`
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
mode: "jit",
darkMode: "class",
content: ["./**/*.tsx"],
plugins: [],
};
```
`style.css`
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
## Slackにアクセスして情報を取得する
通信部分をつくる。Service Workerの実装をする。
<div class="link-card">
<div class="link-card-header">
<img src="https://docs.plasmo.com/favicons/favicon-32x32.png" class="link-card-site-icon"/>
<span class="link-card-site-name">Plasmo Docs</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<p class="link-card-title">Background Service Worker – Plasmo</p>
<p class="link-card-description">Documentation on how to use background service workers with Plasmo.</p>
</div>
<img src="https://docs.plasmo.com/images/seo-1200-700.png" class="link-card-image" />
</div>
<a href="https://docs.plasmo.com/framework/background-service-worker"></a>
</div>
> An extension's background service worker is powerful because it runs in the service worker context(opens in a new tab). For example, when in this context, you no longer need to worry about CORS and can fetch resources from any origin. It is also common to offload heavy computation to the background service worker.
とあるので[[CORS]]を回避できる。素晴らしい！
`background.ts`を作成。
```ts
export {};
console.log("たつおおおおおおおおおおおおおお");
```
`chrome://extensions`から[[Chrome Extension]]をリロードして `service worker` から[[Chrome devtools]]を起動すると、`background.ts`のコードが実行されたことが分かる。
![[Pasted image 20240123230803.png]]
以下のように[[Slack]]へのリクエストを雑に実装する。
```ts
export {};
async function search(query: string) {
const url = `https://slack.com/api/search.messages?query=${query}&sort=timestamp`;
const res = await fetch(url, {
headers: {
authorization: `Bearer ${token}`,
},
});
console.log(await res.json());
}
search("ほげほげ");
```
`token`の値があっていれば、これで結果が返ってくる。[[CORS]]とは無縁の心配。
## トークンを入力させる
最終的には[[OAuth 2.0]]にしたいけど、一旦直接入力させる。
## 続き
- [ ] 実装を[[OAuth 2.0]]にする