Spotify Chrome 확장: 음악 컨트롤러 | 2단계

Spotify Chrome 확장 - 사용자 인터페이스

이것은 다단계 프로젝트의 두 번째 단계입니다. 우리는 ReactJS가 지원하는 Spotify Chrome 확장을 구축했습니다. 이것은 사용자의 Spotify 세션을 제어할 수 있도록 합니다

1단계에서 찾을 수 있다.

이 자습서는 Google Chrome 확장의 작동 방식을 알고 있다고 가정합니다.여기서 더 많은 정보를 얻을 수 있습니다.

개발자 환경 설정부터 시작하겠습니다.

우리는 보일러판 연장 장치가 운행 중이다.
만약 당신이 그것이 무엇인지 모른다면 윗글을 참고하세요.
우리는 이 기본 설정을 채택하여 그것을 수정할 것이다.
우리는 세 가지 일을 해야 한다.

파일 구조 구성

선적 명세서를 갱신합니다.json

추가 패키지를 설치하고 웹 패키지를 업데이트합니다.프로비저닝

1

이미지 및 글꼴 폴더를 만듭니다.
첫 번째 단계의 자원과 프로젝트의 글꼴 (.woff) 파일을 추가합니다.
우리가 사용하는 것은'구식 모험'글씨체다.(재구매 협의 중)

2

명세서를 갱신합시다.json.
배경 스크립트'hasher 와 인코더'를 추가합니다.js', 우리는 나중에 백엔드를 구축할 때 그것을 사용할 것입니다.
권한과 네트워크 접근 가능한 자원을 추가할 것입니다.
이것은 잠시 후 프론트 데스크톱 스크립트에서 이미지 파일로 연결할 수 있도록 합니다.

// manifest.json

{
    "name": "Chrome Extension - Spotify Player",
    "description": "Building a Spotify player controller using ReactJS and Chrome Extension.",
    "version": "0.1.0",
    "manifest_version": 2,
    "icons": {
        "16": "./images/obj-16x16.png",
        "32": "./images/obj-32x32.png",
        "48": "./images/obj-48x48.png",
        "128": "./images/obj-128x128.png"
    },
    "background": {
        "scripts": [
            "./background.js",
            "./hasher_and_encoder.js"
        ]
    },
    "options_page": "./options.html",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "permissions": [
        "[http://*/*](http://*/*)",
        "[https://*/*](https://*/*)",
        "tabs",
        "identity",
        "[https://api.spotify.com/*](https://api.spotify.com/*)",
        "storage"
    ],
    "web_accessible_resources": [
        "*.png",
        "*.gif"
    ]
}

셋.

설치를 완료하기 위해서, 우리는 추가 소프트웨어 패키지를 설치할 것입니다. 그리고 웹 패키지가 우리의 새로운 파일 구조를 어떻게 처리하는지 알 수 있도록 할 것입니다.
'스타일 마운트', 'css 마운트', '파일 마운트' 를 설치해야 합니다.

npm install --save-dev style-loader css-loader file-loader

웹 가방에 있어요.구성에는 다음 두 가지 규칙이 추가됩니다.

css 파일은 '스타일 마운트' 와 'css 마운트'

로 처리됩니다

woff 글꼴 파일은'파일 로더'

로 처리
또한 "CopyWebpackPlugin"을 업데이트해야 합니다.
특정한 이미지 형식이 아닌 이미지 폴더 전체를 복사합니다.우리는 "hasher 와 인코더"에 항목을 추가하기만 하면 됩니다.js의 도서관도 마찬가지다.(작성이 끝날 때 리포로 모든 파일을 볼 수 있습니다)
마지막으로, 주입 스크립트를 빠르게 변경해야 합니다.
우리는 전경을 연결하는 선을 꺼낼 것이다.묶음js'.
그렇지 않으면 나중에 오류가 발생할 수 있습니다.

네, 환경 설정을 완료했습니다.UI 를 시작합니다.

나는 너를 데리고 이 프로그램의 모든 줄의 CSS를 훑어보지 않을 것이다.많이요.
나는 중요한 부분, 특히 우리가 확장한 모든 부분의 배후 디자인 이념을 설명할 것이다.

프론트 데스크톱 응용

옵션 어플리케이션

팝업 어플리케이션

모든 ReactJS 프로그램처럼 서로 독립적으로 실행되기 때문에, 나는 그것들을 응용 프로그램이라고 부른다.
우리는 단지 크롬 확장을 사용하여 이 프로그램들 간의 통신을 조율할 뿐이다.

세 가지 앱 중 가장 큰 앱 중 하나인 프론트 데스크톱부터 시작해 봅시다.

디자인 아이디어는 다음과 같습니다.

이 프로그램은 우리 페이지의 오른쪽 아래에 위치해 있습니다.
모든 구성 요소는 주 용기가 있습니다.이것은 전경 구성 요소입니다.
우리가 표시하고자 하는 모든 페이지는 '하위 용기' 로 간주됩니다.
이 응용 프로그램에 대해 우리는 두 개의 페이지가 있다.

카트리지 플레이어 또는 "플레이어"부품

로드 페이지 구성 요소

유저는 세 부분으로 나뉜다.

"Ticker"- 현재 재생 중인 곡 표시

"PlayerBody"- 유저의 다른 GIF 보이기: 재생, 정지, 불러오기

"Player Buttons"- 플레이어를 제어하는 html div 요소: show/hide;재생/일시 중지;다음 궤도;전면 트랙

"LoadingPage"는 플레이어처럼 "하위 컨테이너"로 설계된 간단한 구성 요소입니다.
"불러오기..."텍스트가 있는gif**만 표시합니다.

옵션 응용 프로그램으로 이동합니다.

디자인 아이디어는 다음과 같습니다.

이 프로그램은 카트리지 '플레이어' (즉 '프론트 데스크톱' 구성 요소) 와 같은 부모 등급을 가지고 있습니다.
지금은 그렇지 않지만, 최종적으로 '프론트 데스크톱' 구성 요소를 복사해서 옵션 페이지의 부모로 붙일 것입니다.
우리가 이렇게 하는 것은 옵션 페이지가 우리의 카세트 테이프 플레이어와 같은 상태에 접근할 수 있기를 희망하기 때문이다.
우리가 이 시리즈의 뒤에서 실제로 이 일을 할 때, 이것은 더욱 의미가 있을 것이다.
현재, 우리는 일반적인 '옵션' 구성 요소를 만들고, 실제 '옵션 페이지' 에 카세트 테이프 플레이어의 이미지를 저장하는 데 사용할 '옵션' 구성 요소를 추가했습니다.

팝업 프로그램으로 이 작업을 완성합시다.

디자인 아이디어는 다음과 같습니다.

사용자 상태에 따라 로그인 또는 로그아웃 단추를 표시하는 간단한 단일 구성 요소 응용 프로그램

그래서 우리는 이미 우리의 응용을 위해 기본적인 구축을 했다.

이 단계의 원본 파일 here 을 찾을 수 있습니다.
다음 단계에서, 우리는state를 실현하기 시작할 것이다.

더 깊은 안내를 원하신다면 유튜브에 있는 제 동영상 튜토리얼을 보십시오.

Spotify 디렉터 - 2단계