0717

docs/2024/07/07-17.md

@@ -0,0 +1,43 @@
+# 2024-07-17
+
+## execute contentscript
+
+service-worker를 ts로 변경하면서 생긴 문제 절대경로로 명시하여 해결 (not receiving, file path)  
+하지만 오류가 없음에도 contentscript가 load되지 않음  
+`chrome.action.onClicked` event로 contentscript를 단순 load만 하지않고  
+react를 사용하는 contentscript내부에서 body.prepend 하여  
+html내부에 script를 삽입하는 방향으로 수정해볼 것
+
+### chrome.action
+
+공식문서 중 콘텐츠 클릭시 스크립트 삽입부분
+
+```json title="manifest.json"
+{
+  "name": "Action script injection demo",
+  "version": "1.0",
+  "manifest_version": 3,
+  "action": {
+    "default_title": "Click to show an alert"
+  },
+  "permissions": ["activeTab", "scripting"],
+  "background": {
+    "service_worker": "background.js"
+  }
+}
+```
+
+```js title="service-worker.ts"
+chrome.action.onClicked.addListener((tab) => {
+  if (tab.id) {
+    chrome.scripting.executeScript({
+      target: { tabId: tab.id },
+      files: ['dist/contentscript.js'],
+    });
+  }
+});
+```
+
+```typescript
+alert('hello world');
+```