Google 지도 버튼을 복원하기 위해 Chrome 확장 프로그램을 만드는 방법

안녕하세요!
구글 지도 버튼을 복원하기 위한 아주 간단한 크롬 확장 프로그램을 만드는 방법에 대한 튜토리얼입니다. EU 디지털 시장법(DMA)에 따라 Google은 유럽 경제 지역(EEA)의 Google 검색을 변경하여 Google 지도로 연결되는 검색 페이지 상단의 지도 링크를 제거했습니다. 이 버튼을 복원하기 위해 확장 프로그램을 만들기로 결정했습니다.

다음 방법을 다룹니다.

1. manifest.json 파일 생성 - Chrome 확장 프로그램에 필요
2. Google 검색결과 페이지를 조사하여 구조를 이해하세요.
3. 지도 버튼을 삽입하려면 JavaScript 파일을 작성하세요.
4. 브라우저에 새로운 Chrome 확장 프로그램을 추가하세요.

시작하는 방법?

Google은 Chrome 확장 프로그램 생성에 대한 훌륭한 문서를 제공합니다.

시작하자

먼저 매니페스트.json 파일을 생성해야 합니다. 이 파일에 대해서는 자세히 설명하지 않겠습니다. 자세한 내용은 여기에서 읽어보실 수 있습니다.

{
    "manifest_version": 3,
    "name": "Google Maps button restored",
    "version": "1.0",
    "description": "Restore google maps button on search page",
    "content_scripts": [
      {
        "js": ["content.js"],
        "matches": [
          "*://www.google.com/search*"
        ]
      }
    ]
  }

우리는 무엇을 하고 싶은가?

코딩을 시작하기 전에 Google이 검색 결과를 표시하는 방식을 이해해야 합니다. 예를 들어 Google에 "Warsaw"를 입력하고 결과를 확인할 수 있습니다.

필요한 HTML 코드 생성

이제 이 페이지의 HTML 코드를 살펴보겠습니다. F12를 눌러 개발자 도구를 열고 그래픽, 비디오 등과 같은 요소가 포함된 div를 찾으세요. crJ18e 클래스로 태그가 지정되어야 합니다.

<div class="crJ18e">
  <div role="list" style="display:contents">
    <div role="listitem"></div>
  </div>
</div>

지도 버튼을 추가하려면 이 구조를 복사해야 합니다. 각 속성과 내부 꼬리표. document.querySelector 메서드를 사용하여 원하는 태그를 찾고 document.createElement 메서드를 사용하여 새 태그를 만듭니다. content.js라는 이름의 새 JavaScript 파일을 만들어 보겠습니다.

const outerDiv = document.querySelector('.crJ18e');

if (outerDiv) {
  const innerDiv = outerDiv.querySelector('[role="list"]');

  if (innerDiv) {
    const newDiv = document.createElement('div');
    newDiv.setAttribute('role', 'listitem');
    newDiv.setAttribute('data-hveid', 'CBYQAA');
    newDiv.setAttribute('data-ved', '2ahUKEwj1n-q81qOHAsXwCqvEDHahCC8MqQJAB6BAgBEAA');

    const aTag = document.createElement('a');
    aTag.href = ``;
    aTag.className = 'LatpMc nPDzT T3FoJb';
    aTag.setAttribute('role', 'link');
    aTag.setAttribute('data-hveid', 'CBYQAA');
    aTag.setAttribute('data-ved', '2ahUKEwj1n-q81qOHAsXwCqvEDHahCC8MqQJegQIFhAB');

    const innerLinkDiv = document.createElement('div');
    innerLinkDiv.className = 'YmvwI';
    innerLinkDiv.textContent = 'Maps';

    aTag.appendChild(innerLinkDiv);

    newDiv.appendChild(aTag);

    innerDiv.appendChild(newDiv);
  }
}

Google 지도로 링크 리디렉션

Google 지도 검색의 URL이 무엇인지 어떻게 알 수 있나요? Google 문서에서 다음과 같은 것을 발견했습니다.
https://www.google.com/maps/search/?api=1&query=parameters

우리가 해야 할 일은 사용자가 Google에서 검색한 내용을 가져와서 매개변수를 바꾸는 것뿐입니다. "Warsaw"에 대한 검색 URL은 다음과 같이 시작됩니다.
https://www.google.com/search?q=바르샤바. 따라서 q 매개변수의 값을 가져와야 합니다.

const urlParams = new URLSearchParams(window.location.search);
const searchQuery = urlParams.get('q');

다른 언어 페이지 포함

'https://www.google.com/'이 유일한 Google 검색 페이지는 아니라는 점을 기억하세요. 국가별로 지정할 수 있습니다. 예를 들어 폴란드어 페이지 URL은 'https://www.google.pl/'입니다. 이를 매니페스트.json 파일에 포함해야 합니다.

전체 코드

contents.js

const urlParams = new URLSearchParams(window.location.search);
const searchQuery = urlParams.get('q');

if (searchQuery) {
  const outerDiv = document.querySelector('.crJ18e');

  if (outerDiv) {
    const innerDiv = outerDiv.querySelector('[role="list"]');

    if (innerDiv) {
      const newDiv = document.createElement('div');
      newDiv.setAttribute('role', 'listitem');
      newDiv.setAttribute('data-hveid', 'CBYQAA');
      newDiv.setAttribute('data-ved', '2ahUKEwj1n-q81qOHAsXwCqvEDHahCC8MqQJAB6BAgBEAA');

      const aTag = document.createElement('a');
      aTag.href = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(searchQuery)}`;
      aTag.className = 'LatpMc nPDzT T3FoJb';
      aTag.setAttribute('role', 'link');
      aTag.setAttribute('data-hveid', 'CBYQAA');
      aTag.setAttribute('data-ved', '2ahUKEwj1n-q81qOHAsXwCqvEDHahCC8MqQJegQIFhAB');

      const innerLinkDiv = document.createElement('div');
      innerLinkDiv.className = 'YmvwI';
      innerLinkDiv.textContent = 'Maps';

      aTag.appendChild(innerLinkDiv);

      newDiv.appendChild(aTag);

      innerDiv.appendChild(newDiv);
    }
  }
}

manifest.json

{
    "manifest_version": 3,
    "name": "Google Maps button restored",
    "version": "1.0",
    "description": "Restore google maps button on search page",
    "content_scripts": [
      {
        "js": ["content.js"],
        "matches": [
          "*://www.google.com/search*",
          "*://www.google.pl/search*"
        ]
      }
    ]
  }

새로운 크롬 확장 프로그램 추가

브라우저에 확장 프로그램을 추가하는 것은 매우 간단합니다.
에 따르면 Google 문서, 다음은 단계입니다:

1. 확장자(2개 파일) 폴더를 테스트 기기에 저장하세요.
2. chrome://extensions/로 이동하세요.
3. 오른쪽 상단에서 개발자 모드를 켭니다.
4. 압축해제된 항목 로드를 클릭하세요.
5. 앱 또는 확장 프로그램 폴더를 찾아서 선택하세요.

이제 Google에 무언가를 입력하면 새로운 지도 버튼이 다른 Google 버튼과 나란히 표시됩니다.

문제 해결 및 일반적인 문제

• 버튼이 표시되지 않음: Google 검색 페이지의 클래스 이름과 구조가 변경되지 않았는지 확인하세요. 페이지를 살펴보고 확인하세요.
• JavaScript 오류: 개발자 도구를 열고 콘솔에서 스크립트에 오류가 있는지 확인하세요.

고급 기능

1. 버튼 배치 변경: 다른 Google 버튼을 기준으로 지도 버튼의 위치를 ​​조정합니다.
2. 현지화된 버전: 더 많은 언어와 Google 도메인으로 지원을 확장합니다.
3. 추가 버튼: "이미지" 또는 "뉴스"와 같은 유용한 버튼을 추가합니다.
4. 오류 처리: 더 많은 오류 처리를 구현합니다.

참고: Google은 HTML 코드를 변경할 수 있으므로 이에 따라 코드를 업데이트해야 합니다.

결론

다음 단계에 따라 검색 페이지에서 Google 지도 버튼을 복원할 수 있습니다. 사용해 보시고 문제가 발생하거나 개선을 위한 제안 사항이 있으면 알려주시기 바랍니다. 첫 번째 개발자 커뮤니티 게시물입니다

위 내용은 Google 지도 버튼을 복원하기 위해 Chrome 확장 프로그램을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!