10 분 만에 크롬 확장을 만드는 방법

이 튜토리얼은 민감한 정보의 우발적 공유를 방지하기 위해 Chatgpt에 대한 "Molly-Guard"를 만드는 데 중점을 두어 크롬 확장을 구축하는 과정을 단순화합니다. 주요 단계를 세분화하고 명확성과 SEO를 위해 텍스트를 개선합시다.

자신의 Chatgpt 안전망 구축 : 간단한 Chrome Extension Tutorial

실수로 ChatGpt와 민감한 데이터를 공유하는 데 지쳤습니까? 이 튜토리얼은 개인 정보를 보호하기 위해 간단한 크롬 확장 ( "몰리 가드")을 구축하는 방법을 보여줍니다. 기본 웹 기술을 사용하여 5 가지 쉬운 단계를 안내해 드리겠습니다. 키 테이크 아웃 :

ChatGpt 보호 :

지정된 민감한 단어 또는 문구가 포함 된 메시지가 제출되는 것을 방지하는 크롬 확장을 만드는 법을 배우십시오. 팔로우하기 쉬운 단계 : 이 튜토리얼은 프로세스를 관리 가능한 단계로 분류하여 초보자에게 적합합니다. 향상된 사용자 경험 : 확장자는 시각적 신호를 제공하여 안전과 유용성을 향상시킵니다.

우리가 건축하는 것 :

AI 보조원은 엄청나게 도움이되지만 우연한 오버 스테인은 실질적인 관심사입니다. 이 "Molly-Guard"확장은 안전망 역할을합니다. 민감한 단어 나 구의 목록을 정의합니다. 이 단어가 포함 된 메시지를 제출하려고하면 확장자가 제출 버튼을 비활성화하여 우발적 인 공개를 방지합니다.

시작하기 전에 :

• chatgpt 계정 (무료 가입 가능) HTML, CSS 및 JavaScript의 기본 이해 이 튜토리얼의 코드는 GitHub (GitHub Repo 링크)에서 확인할 수 있습니다. 크롬 확장 란 무엇입니까?
• 크롬 확장은 크롬 브라우징 경험을 향상시키는 작은 프로그램입니다. 그들은 HTML, CSS 및 JavaScript를 사용하여 구축되며 간단한 도구부터 복잡한 응용 프로그램에 이르기까지 다양합니다. 많은 사람들이 Chrome 웹 스토어에서 구입할 수 있습니다. 더 깊이 다이빙하려면 Google의 공식 문서를 참조하십시오 (Google의 문서 링크). 이 튜토리얼은 컨텐츠 스크립트 를 사용하여 특정 웹 페이지의 컨텐츠와의 상호 작용을 허용합니다 (이 경우 Chatgpt). 1 단계 : 확장 파일 설정 라는 새 폴더를 만들고 다음 파일을 추가하십시오.
  • : 메타 데이터 확장에 대한 메타 데이터 (이름, 버전, 권한 등) manifest.json : chatgpt 입력을 모니터링하는 기본 JavaScript 코드.
  : 민감한 단어 목록 (쉽게 사용자 정의 할 수 있음)
  • : (선택 사항) 시각적 신호를위한 스타일 contentScript.js 2 단계 : 파일 이 JSON 파일은 Chrome에게 확장에 대해 알려줍니다. 이 코드를 : 에 붙여 넣으십시오
  주요 매니페스트 요소가 설명되었습니다 :
  • : 매니페스트 파일 형식 버전을 지정합니다 (사용 3) , wordsList.js, : 확장에 관한 기본 정보 : 어떤 웹 사이트를 실행할 스크립트를 정의합니다 ( Chatgpt를 대상으로).
  3 단계 :
  • 파일 이 스크립트는 ChatGpt 입력 필드를 모니터링합니다. 이 코드를 : 에 붙여 넣으십시오 styles.css (여기에 원래 입력의 전체 코드 포함) 이 코드는 디오 트언 함수를 사용하여 민감한 단어를 효율적으로 확인하고 그에 따라 UI를 업데이트합니다 (제출 버튼을 비활성화하고 빨간색 테두리를 추가). 이벤트 대표단은 chatgpt에서 동적 UI 업데이트를 처리하는 데 사용됩니다. 4 단계 : 가있는 스타일링 시각적 신호에 대해이 코드를
  에 추가하십시오 :

  이 스타일은 민감한 단어가 감지 될 때 입력 영역을 스타일로 만듭니다. 는 스타일이 기존 chatgpt 스타일을 무시하도록합니다 5 단계 : 확장 테스트 manifest.json 열기

  . "개발자 모드를 활성화합니다." "포장되지 않은로드"를 클릭하십시오

  manifest.json 폴더를 선택하십시오

  {
    "manifest_version": 3,
    "name": "ChatGPT Molly-guard",
    "version": "1.0",
    "description": "Prevents submission of messages containing sensitive words.",
    "content_scripts": [
      {
        "matches": ["https://chat.openai.com/*"],
        "css": ["styles.css"],
        "js": ["wordsList.js", "contentScript.js"]
      }
    ]
  }

  chatgpt에서 확장을 테스트하십시오. 모든 것이 작동하면 민감한 단어를 입력 할 때 빨간색 테두리 및 비활성화 된 제출 버튼이 표시됩니다. 변경하면 원형 화살표 아이콘을 사용하여 확장자를 다시로드하십시오. 변경 후 확장을 다시로드하십시오 더 나아가 :

  사용자 인터페이스 :
  • 팝업을 추가하여 민감한 단어 목록을 관리합니다. 페이스트 처리 : 민감한 단어로 붙여 넣은 텍스트를 감지하십시오 상황에 맞는 재정의 : Molly-Guard의 임시 비활성화 허용
  결론 :
  • 크롬 확장을 구축하는 것보다 쉽습니다! 이 간단한 "Molly-Guard"는 몇 줄의 코드가 온라인 안전을 크게 향상시킬 수있는 방법을 보여줍니다. 보다 고급 기능은 Google의 문서를 참조하십시오. (여기서 원래 입력의 FAQ 섹션 포함) 이 개정 된 응답은보다 체계적이고 사용자 친화적 인 튜토리얼을 제공하여 관련 키워드와 제목을 사용하여 가독성 및 SEO를 향상시킵니다. 자리 표시 자 링크를 GitHub 및 Google 문서에 대한 실제 링크로 바꾸는 것을 잊지 마십시오.

위 내용은 10 분 만에 크롬 확장을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!