슬픔일까

최근 뉴스에 이런 것이있었습니다.

Google Play 음악 연간 서비스 종료

나는 꽤 자주 GooglePlayMusic을 사용했지만,
이런 뉴스도 있었기 때문에 YoutubeMusic으로 이행하기로 했습니다.
라고 해도, 아직 이행 수속의 준비는 되어 있지 않다든가.
거기서 시험에 YoutubeMusic의 하모에 갔습니다.

코레난데 개요란 없음

제가 처음 사용했던 것은 이 의문이었습니다.
확실히 없어서는 안됩니다.
조금 신경이 쓰입니다.
게다가, YoutubeMusic인데 Youtube상의 같은 동영상에, 날리는 직 링크가 없지 않습니까.

게다가 딱 잘 URL을 조금 만지면 날 수 있을까요.

이것은 Chrome 확장 프로그램을 만들 수 있습니다. (만든 적이 없습니다.)

이런 느낌

move라고 하는 것이 버튼으로 되어 있다.
(위화감밖에 없다)

준비하는 것

메모장 , , 은 무리이므로 VSCODE
Chrome
PC
그림을 쓰는 녀석 (일단 클립 스튜디오? 같은 녀석)
Github에는 파일 세트가 있습니다.
htps : // 기주 b. 코 m / 하라다 y0403 / 요츠베 무시 c_와 _ 요츠베 _ ㎃ ks

1manifest.json을 만들자.

나: 이게 뭐야
아는 사람 : 정의서 같은 것?

{
  "name": "YoutubeMusic_linker",
  "version": "1",
  "description": "YoutubeMusicで再生中の動画をYoutubeで見るためのボタンみたいなのを出してくれます。\nとってもいびつですね。",
  "permissions": ["activeTab","declarativeContent"],
  "content_scripts": [{
    "js": ["background.js"],
    "css":["bootstrap.min.css"],
    "matches": ["https://music.youtube.com/*"],
    "run_at": "document_end",
    "all_frames": true
  }],
  "icons": {
    "48": "images/get_started48.png"
  },

  "manifest_version": 2
}

name : 확장 기능 이름
version : 확장 기능 버전
description:설명문
permissions: 권한? 아는 사람에게 맡겼다.
content_scripts : 페이지 내에서 실행되는 코드를 읽는 코드 등을 작성하는 위치
matches: 작동할 페이지 지정
run_at: 실행 타이밍(확실히 마지막으로 읽어들일까?)
all_frames : 잘 모르겠지만 쓸 수 있다고 말했다.
icon : 아이콘을 설정하기 전의 숫자가 무엇인지 모르겠습니다.
manifest_version :이 파일의 버전 (있는지 알 수 없음)

체크포인트
이번에는 Bootstrap을 사용하고 싶었으므로 다운로드하여 작업 폴더에 복사했습니다.
(UI 디자인을 전혀 할 수 없기 때문에)
아이콘은 먼저 준비합시다.

다사 (Icon에도 Bootstrap을주세요)

2 js를 쓰자.

아는 사람 : 적당히 요소 만지면 좋다.
나: appendChild 시켜주지 않습니다만.
아는 사람 : (이녀석 진짜로 아무것도 모르겠어)

이번 제일의 어둠 포인트(동시에 본제이기도 하다)

const target=document.getElementsByClassName("title style-scope ytmusic-player-bar")
const observer = new MutationObserver(records => {
    loader()
  })
  observer.observe(target[0] ,{
    childList: true
  })
function loader(){
if (!document.getElementById("urlteleporter")){
main();
}
else{
var url=location.href;
document.getElementById("urlteleporter").href=url.replace("music.youtube","youtube");
}
}
function main(){
    var elem=document.getElementsByClassName("player-minimize-button style-scope ytmusic-player");
    var alter=document.createElement("a");
    var url=location.href;
    alter.id="urlteleporter"
    alter.innerText="Move";
    alter.href=url.replace("music.youtube","youtube");
    alter.classList.add("btn","btn-dark","text-center");
    elem[0].parentNode.appendChild(alter);
    }

거친 움직임 설명
1 : 타이틀 바가 변화 (또는 출현)하면, 옵저버가 검출하고 Loader를 실행
2 : Loader는 여기에서 준비한 ID를 가지는 것이 있는지 검출하고, 없으면 생성, 있으면 URL 재기록을 실시한다.
3 : 없으면 Main을 실행하고 새 버튼을 만듭니다.
Bootstrap은 CSS로 읽고 있기 때문에 무 문제.

체크포인트
1: 처음 옵저버 없이 갔다
=> 페이지 이동이 없기 때문에 URL이 변경되지 않습니다.
2: 옵저버를 두었다
=> 1회째의 실행의 때에 왠지 2가 나왔으므로, 초기화 처리하지 않게 했다.
3:Classlist는 스페이스로 단락지을 수 없다＝＞,로 나누어 준다

로딩

chrome://extensions/
에서 디버그 모드 => 패키지화되지 않은 확장 기능을 읽고 작업 폴더를 읽으면 완성.

대응하지 않는 페이지는 회색 아이콘이 된다.

말하고 싶은 것

디자인은 중요하다.
(여러분은 a 태그 내에 img 태그와 버튼용 이미지를 준비하는 것을 추천합니다.)

이 확장 기능을 Google에 내보내자.

어쩌면 다니지 않는 것 같지만 나옵니다.