다른 환경에서 현재 탭을 여는 Chrome 확장 만들기

개요


컨텍스트 메뉴에서 환경을 선택하고 현재 열린 탭의hostname을 다시 쓰고 다시 표시하는 Chrome 확장자를 만듭니다

성과물


지정한 페이지에 상하문 메뉴를 표시하고 열린 환경을 선택할 수 있습니다

소스 코드


https://github.com/meihei3/open-in-another-environment

컨디션


Requirements
  • chrome-extension-cli >= 0.2.1
  • node >= v12
  • Chrome Extension CLI는 다음 명령을 사용하여 설치할 수 있습니다.
    $ npm install -g chrome-extension-cli
    

    이루어지다

  • Chrome 확장 기능의 기본 제공
  • 상하문 메뉴의 표시
  • 다른 환경의 URL 읽기
  • Chrome에 대한 읽기 확장 기능
  • 라는 순서로 설명한다.

    Chrome 확장의 기본 작성


    Chrome Extension CLI를 사용한 프로젝트 제작
    $ chrome-extension-cli [project name]
    
    Success가 나타나면 정상적으로 제작
    Success! Created [project name] at [current dir path]/[project name]
    Inside that directory, you can run below commands:
    
      npm run watch
        Listens for files changes and rebuilds automatically.
    
      npm run build
        Bundles the app into static files for Chrome store.
    
    We suggest that you begin by typing:
    
      1. cd [project name]
      2. Run npm run watch
      3. Open chrome://extensions
      4. Check the Developer mode checkbox
      5. Click on the Load unpacked extension button
      6. Select the folder [project name]/build
    
    팝업 카운터의 코드가 샘플 코드로 존재하기 때문에 삭제합니다

    컨텍스트 메뉴 표시


    확장된 컨텍스트 메뉴를 표시하려면 permissionscontextMenus를 추가합니다.
    {
      ...
      "permissions": [
        "contextMenus"
      ]
    }
    
    다음 background.js에 다른 환경에 대한 설정을 적으십시오.
    매개 변수
    설명
    id
    contextMenus를 클릭할 때 menuItemId
    title
    표시된 문자열
    hostname
    대상 호스트
    const ENV = {
      production: {
        id: 'production',
        title: 'Production',
        hostname: 'https://example.com',
      },
      staging: {
        id: 'staging',
        title: 'Staging',
        hostname: 'https://example.net',
      },
      development: {
        id: 'development',
        title: 'Development',
        hostname: 'https://example.edu',
      },
    };
    
    방금 환경 설정을 바탕으로 상하문 메뉴 추가
    chrome.runtime.onInstalled.addListener(() => {
      const parentId = chrome.contextMenus.create({
        id: 'parent',
        title: '別の環境で開く',
        contexts: ['all'],
        documentUrlPatterns: [
          ENV.production.hostname + '/*',
          ENV.staging.hostname + '/*',
          ENV.development.hostname + '/*',
        ],
      });
    
      Object.values(ENV).forEach((_env) => {
        chrome.contextMenus.create({
          id: _env.id,
          title: _env.title,
          parentId: parentId,
        });
      });
    });
    
    chrome.runtime.onInstalled.addListener() 확장 기능을 설치한 경우 한 번만 호출chrome.contextMenus.create()에서 컨텍스트 메뉴 작성
    매개 변수의 설명은 다음과 같다(더 자세한 정보는 여기..
    매개 변수
    설명
    id
    contextMenus를 클릭할 때 menuItemId
    title
    표시된 문자열
    parentId
    상위 메뉴의 ID(매개변수의 id 또는 create()의 반환 값 모두)
    contexts
    표시할 요소 선택
    documentUrlPatterns
    지정된 URL 모드의 컨텍스트 메뉴만 표시합니다.

    다른 환경의 URL 읽기

    permissionstabs를 추가하여 페이지 이동
    {
      ...
      "permissions": [
        "contexMenus",
        "tabs"
      ]
    }
    
    상하문 메뉴에서 선택한 환경에서 열기 위해background.jscontextMenus에서 설정onClicked
    const openIn = (hostname, pageUrl) => {
      const url = new URL(pageUrl);
      chrome.tabs.update(null, { url: hostname + url.pathname + url.search });
    };
    chrome.contextMenus.onClicked.addListener((info) => {
      switch (info.menuItemId) {
        case ENV.production.id:
          openIn(ENV.production.hostname, info.pageUrl);
          break;
        case ENV.staging.id:
          openIn(ENV.staging.hostname, info.pageUrl);
          break;
        case ENV.development.id:
          openIn(ENV.development.hostname, info.pageUrl);
          break;
        case 'parent':
          break;
        default:
          console.log('err: clicked undefined menu');
          break;
      }
    });
    
    chrome.contextMenus.onClicked.addListener()에서 상하문 메뉴를 눌렀을 때의 동작
    모든 상하문 메뉴를 클릭하면 불이 납니다, menuItemId 설정 동작을 사용하세요chrome.tabs.update()에 지정된 URL로 마이그레이션합니다.location.href의 행동거지(더 자세한 정보는여기.

    Chrome에 확장 파일 불러오기


    확장 생성
    $ npm run build
    
    에서 chrome://extensions/로 이동하여 디버그 모드를 ON으로 설정

    포장되지 않은 확장 읽기 에서 방금 작성한 것을 선택하십시오 [project name]/build
    방문https://example.com/, 상하문 메뉴 보이기 완료

    참고 자료

  • Chrome 확장 기능을 즉시 개발할 수 있는 오픈 소스 템플릿 "Chrome Extension CLI"
  • Google Chrome Extension-Google 7 을 만들어 봤습니다.
  • 크롬 기능 확장에 대한 이벤트 페이지
  • 좋은 웹페이지 즐겨찾기