활자 스크립트에서 크롬 확장 apis 사용

활자 스크립트에서 크롬 확장 apis 사용

나는 TypeScript로 작성된 크롬 확장자를 만들고 있다. 웹스톰을 사용하고 있는데 프로젝트에 라이브러리를 추가했어요.

그러나 이것을 타이프스크립트 코드에 적을 때 : 오류가 났다 : .

이 때문에 제 자바스크립트 파일이 생성되지 않아 제 확장자에서 사용할 수 없습니다.

해결책이 있나요?

---

그것은 잘 작동할 것입니다:

팁: 태그가 추가되었는지 확인합니다:

/// <reference path="pathTo/chrome.d.ts"/>

---

스크립트 2(또는 2.x, 확실하지 않음) 기준으로 @type에서 크롬 타입을 가져와야 합니다.

꾸러미로.json:

"devDependencies": {
    ...
    "@types/chrome": "0.0.35", // or just npm install --save-dev @types/chrome

그리고 tsconfig:

    "types": [
        //(various types, e.g. jquery, core-js),
        "chrome"
    ]

---

TypeScript를 사용하여 Chrome 확장을 개발하려고 할 때 아래와 같은 오류가 발생했습니다:

npm install --save-dev @types/chrome

이것은 당신의 파일에 아래에 입력합니다.

오류 수정:

[tsl] C의 오류:\Users\my_user\Documents\my_chrome_extension\src\content.ts(28,3) TS2304: 'chrome' 이름을 찾을 수 없습니다.

---

설치만 하면 작동이 됩니다. 설치해 보겠습니다:

yarn add @types/chrome --dev

또는 NPM

npm install @types/chrome --save-dev

이제 오류없이 사용하세요!

---

Chrome과 Firefox의 유형

확장 API는 현재 크롬과 파이어폭스에서 기본적으로 동일하기 때문에 두 가지 상황에서 모두 사용할 수 있습니다.

1. 설치하다

yarn add @types/chrome --dev

2. 업데이트 tsconfig

{
  "compilerOptions": {
    ....
    "types": ["chrome"]
  }
}

3. 브라우저 API 기능 가져오기

export function getBrowserInstance(): typeof chrome {
  // Get extension api Chrome or Firefox
  const browserInstance = window.chrome || (window as any)['browser'];
  return browserInstance;
}

---

작동한 내용:

타이프스크립트가 위에 이런 코멘트를 추가함으로써 불쾌감을 주는 코드를 무시하도록 하세요.

// @ts-ignore: saying 'chrome' is not found

작동하지 않은 내용:

• 이 문제가 발생했을 때 @types/chrome을 설치했습니다.
• tsconfig.json에서 type 아래에 "chrome"을 추가하고 typesroot을 지정합니다.
• 참조 경로 설명과 "크롬"을 가져오는 모든 종류의 방법을 추가한다.

@ts-slock 댓글을 추가하기 전에 이것들을 시도해 보세요.

배경:

Angular 11을 이용한 크롬 익스텐션 작업 중입니다. 크롬.런타임에 접속해야해.백그라운드 작업자에게 정보를 보내기 위해 메시지를 보냅니다.

---

@types/chrome이 설치되어 있는지 확인합니다. tsconfig의 종류와 typeroots를 업데이트할 필요는 없을 것 같습니다. 그런 다음 전 세계에서 사용할 수 있는 크롬 유형에 액세스하여 크롬의 유형 정의를 사용합니다:

type getUrl = typeof chrome.runtime.getURL;

이 GitHub 이슈에 대한 좀 더 맥락이 있습니다

---

VS Code에서 나에게도 이런 일이 일어나도록 하세요.

하위 디렉토리에 TS 프로젝트가 있습니다.

project
|-> TS_folder
|-> non-TS_folder

설치를 했음에도 불구하고 계속 같은 오류가 발생하고 있습니다.

다행히도 VS Code에서 내 서브디렉토리를 찾을 수 없다는 것을 알게 되었습니다. 내가 직접 열었을 때, 즉 VS Code 창의 루트가 되었을 때, 모든 에러는 사라졌습니다.

VS Code의 스크린샷 누락:

안타깝게도 VS Code에서는 초사용자 정의 편집기이기 때문에 에 대한 경로를 명시적으로 지정할 수 있는 방법이 없습니다. 많은 견인력이 있었지만 현재 상당히 오랫동안 잠겨 있습니다.

---

매니페스트 v3의 경우

대신 "type"을 추가해야 합니다

사용하다 npm i chrome-types

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["chrome-types"]
  },
  "files": [
    "src/main.ts",
    "src/background.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

---

제목 : Chrome 확장용 TypeScript로 "@types/chrome" 문제 해결

최근 TypeScript로 Chrome Extension 작업 중 문제가 발생했습니다. 이 문제는 TypeScript 형식 정의에 사용하는 것과 관련이 있습니다. 몇 번의 조사 끝에, 나는 같은 문제에 직면한 다른 사람들에게 도움을 줄 수 있는 해결책을 찾았다.

문제:

• TypeScript 프로젝트에 설치했습니다.
• 당신은 당신의 것에 포함시켰다.
• 그러나 사용하려고 하면 TypeScript는 정의되지 않았다고 불평합니다.

이 문제를 해결하고 TypeScript가 인식되도록 하려면 다음 단계를 수행합니다:

1. 먼저 이미 설치한 경우 제거합니다:

   npm uninstall @types/chrome
   # or
   yarn remove @types/chrome
   

   그런 다음 "크롬 유형"을 설치합니다:

   npm install chrome-types
   # or
   yarn add chrome-types
   

2. 가 섹션에 포함되어 있는지 확인합니다. 다음과 같은 모양이어야 합니다:

   {
     "compilerOptions": {
       "types": ["chrome-types"],
       // ... other options ...
     },
     // ... other configurations ...
   }
   

3. Chrome Extension에서 필요한 권한을 선언했는지 확인합니다. 예를 들어, 사용할 계획이라면 매니페스트에는 다음과 같은 내용이 포함되어야 합니다:

   "permissions": [
     "storage"
     // ... other permissions ...
   ],
   

4. 때로는 TypeScript가 변경사항을 즉시 표시하지 않습니다. TypeScript 서버를 다시 시작하거나 코드를 다시 컴파일해 보십시오.

5. 확장을 제대로 초기화하고 있는지 확인합니다. 를 사용하는 코드가 적절한 컨텍스트(일반적으로 이벤트 핸들러 또는 백그라운드 스크립트) 내에서 실행되는지 확인합니다.

샘플 코드:

// Example background script using chrome.storage
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "saveData") {
    // Accessing chrome.storage here should work without errors
    chrome.storage.local.set({ key: message.data }, () => {
      // Handle the result of the storage operation
    });
  }
});

Chrome Extensions용 TypeScript로 작업할 때 문제가 발생하는 사용자와 다른 사용자에게 도움이 되기를 바랍니다. 더 궁금한 사항이 있거나 문제가 생기면 언제든지 물어보세요.