Google 지도 버튼을 복원하기 위해 Chrome 확장 프로그램을 만드는 방법-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2024-07-18 18:58:39

원래의

364명이 탐색했습니다.

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

다음 방법을 다룹니다.

manifest.json 파일 생성 - Chrome 확장 프로그램에 필요
Google 검색결과 페이지를 조사하여 구조를 이해하세요.
지도 버튼을 삽입하려면 JavaScript 파일을 작성하세요.
브라우저에 새로운 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"를 입력하고 결과를 확인할 수 있습니다.

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

필요한 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*"
        ]
      }
    ]
  }

로그인 후 복사