GitHub 병합에서 사운드 재생

또 다른 개발자 회의 중이었습니다. 내가 지금까지하는 대부분의 흥미로운 일처럼 그것은 농담처럼왔다.

“GitHub가 Pull Request를 병합 할 때 종이 구겨지는 소리를 허용하지 않는 것이 유감입니다!”

사실, 저는 제 동료가 핵 소니를 빠르고 더럽히는 것이 얼마나 쉬운 지 잘 모르고 있다고 생각합니다. 나는 그가 그것이 가능하다는 것을 알지도 못했다고 생각합니다.

그리고 그것은 너무 쓸모가 없어서 그렇게하지 않으면 잠을 잘 수 없을 것입니다.

나는 tampermonkey 와 놀 수있는 모든 기회를 아주 즐긴다 . 몇 줄의 자바 스크립트로 시간을 상당히 절약 할 수있는 정말 멋진 기능을 추가 할 수 있습니다. 게다가 n00bs는 당신이 최고의 신인 것처럼 당신을 바라 봅니다. 그리고 semi-n00b로서, 나는 아첨에 취약하다는 것을 고백해야합니다.

첫 번째 섹션에서는 사운드를 트리거하는 방법을 소개합니다. 두 번째 섹션에서는 사운드 자체를 재생하는 방법에 대해 설명합니다. 세 번째는 더 멋지게 만들기위한 추가적인 도전입니다.

분명히 그것이 정확히 내가 어떻게 작동했는지는 아닙니다. 왼쪽으로는 약간의 진전이 있었고 오른쪽으로는 약간 진척이있었습니다. 그러나 나는 그것이 기사를 더 읽기 쉽게 만든다고 믿는다.

이 이야기는 더 많은 tampermonkey / javascript 초보자 지향적입니다. 하지만 프로그래밍에 대해 알아야합니다.

바로 여기에

그래서 이것은 소리를 유발하는 것에 관한 것입니다.

우리 는 가장 마지막에있는“ Confirm merge” ,“ Confirm squash and merge” 또는“ Confirm rebase and merge” 버튼 을 클릭 할 때 재생을 원합니다 (병합 패턴에 따라 다름).

먼저 병합 모드를 선택하세요…
… 그리고 이것이 마지막 클릭입니다!

내가 보통하는 일은 내가 클릭 한 것을 검사 하는 것 inspect입니다. 버튼을 마우스 오른쪽 버튼으로 클릭하고 . 당신은 다음과 같은 결과를 얻게 될 것입니다.

클릭 한 html 노드의 배경은 회색입니다. 같은 수준의 다른 노드가 있다는 것은 주목할 만하지 만 GitHub에서는 볼 수 없습니다.

같은하에 그래서 div, 클래스와 노드를 형제 btn-group-merge, btn-group-squash하고 btn-group-rebase. 클릭버튼 은이 세 가지 중 하나입니다.

이것은 좋은 소식입니다. 이제 간단한 자바 스크립트 쿼리로 버튼을 찾을 수있는 편리하고 효율적인 방법이 필요합니다 . 버튼을 클릭하면 액션을 추가 할 수 있습니다 .

자바 스크립트 쿼리 를 작성하는 방법에는 여러 가지가 있습니다. 먼저 웹 브라우저에서 제공하는 내장 된 기능을 사용할 수 있습니다 (마우스 오른쪽 버튼을 클릭 한 다음“ Copy JS path” ).

document.querySelector( “#partial-pull-merging > div.merge-pr.js-merge-pr.js-details-container.Details.is-merging.open.Details — on > div > form > div > div.commit-form-actions > div > div.BtnGroup.btn-group-merge > button” )

XPath(웹 페이지를 트리로 생각 XPath하고 분기를 선택해야 할 때마다 올바른 방향으로 생각하십시오)를 기반으로하는 또 다른 솔루션이 있습니다 . 다시 " XPath 복사" :

//*[@id=”partial-pull-merging”]/div[1]/div/form/div/div[2]/div/div[1]/button

그러나 그것은 완전히 만족스럽지 않습니다. 요청을 보면 명확하게 정의 된 노드 ( 고유 식별자가 있음 partial-pull-merging ) 에서 시작되는 것을 볼 수 있습니다 . 그리고 언제든지 변경 될 수있는 많은 레이아웃 요소가 있습니다. 즉, 레이아웃이 변경되는 즉시 중단됩니다.

그래서 우리는 여기서 조금 더 조심해야합니다. 그다지 좋은 소식은 아닙니다.

우리가 고려하는 버튼을 보면 속성을 갖는 고유 한 요소 data-disable-with=”Merging…”입니다. 즉,이 속성을 가진 모든 노드를 찾을 수 있다면 설정이 된 것입니다. 그리고 이것은 간단합니다 ( "속성 별 자바 스크립트 검색"검색 ).

[data-disable-with=”Merging…”]

GitHub가이 속성을 수정하면 당연히 깨질 것입니다.하지만이 속성은 제가 관심있는 것에 전념하기 때문에 부작용에 덜 노출 된 것 같습니다.

한결 나아 졌어요. ☯️

풀 다 트리가 BOOM

이제 클릭 할 버튼을 식별 할 수 있다고 확신합니다. 클릭 할 때 소리를 낼 시간 입니다.

tampermonkey 확장 사용을 시작할 때 입니다. 기본적으로이 확장을 사용하면 웹 페이지 내에서 일부 자바 스크립트 코드를 실행할 수 있습니다. 단계별로 가서 강력한 버튼 감지 작업을 먼저 해보겠습니다 . 첫 번째 스크립트를 코딩 해 보겠습니다.

여기서 놀라운 것은 없습니다. 스크립트가 삽입되고 실행되면 풀 요청 페이지에있을 때 간단한 창이 팝업됩니다. 잘되고 있어요. 이제 최종 병합 버튼 을 눌렀을 때이 창을 띄워 보겠습니다 .

이것은 좀 더 흥미 롭습니다. 이 main기능은 버튼을 검색합니다.

그런 다음 각 버튼에 대해 리스너 (보통 관찰자 라고도 함 )가 정의 되어 버튼을 클릭 할 때 호출 playMusic됩니다.

(그것이 playMusic아니라는 것에주의하십시오 playMusic(): 우리는 playMusic아직을 호출 하는 것을 원하지 않고 누군가가 호출 할 수 있기를 원합니다 playMusic. click. 그래서 우리는 playMusic함수 자체를 제공해야합니다. 우리는 그것을 호출해서는 안됩니다!)

그러나 그것은 여전히별로 좋지 않습니다. 노력하면 작동합니다. 하지만 때로는 그렇지 않습니다. 사실 우리는 우리의를 검색 buttons하지만 그들이 발견되었는지 확인하지 않습니다.

여기서 일어나는 일은 웹 페이지가 한 번에 모두로드되지 않는다는 것입니다. 그리고 사용자 행동에 따라 동적으로 변경 될 수 있습니다!

예, 변수 buttons에 무언가 포함되어 있는지 확인할 수 있습니다. 그러나 가장 중요한 것은 비어 있으면 어떻게 할 수 있습니까? 접근 방식을 변경하고 페이지가 변경 될 때 이러한 버튼을 확인해야합니다.

이것은 더 기분이 좋습니다. 우리의 페이지 MutationObserver관찰 할 document입니다. 수정이있을 때마다 버튼을 검색합니다. 그것들을 찾으면 트리거를 정의 할 수 있습니다. 우리는 우리가 한 번에 발견 한 후, 필요 그들 (다른 시간에 찾을 있기 때문에, 관찰자의 연결을 해제하는 것을 잊지 마세요 우리의 사용 사례 ).

그러나 우리는 MutationRecordsmutations 배열을 통해 페이지의 변경 사항을 제공합니다 . 전체를 검색하는 대신이 정보를 사용하는 것이 더 우아하고 효율적이지 않습니까?document

여기에서 노드가 삽입되기를 기다리고 있습니다. 이것이 우리가 전체 문서 ( document , 모든 문서)를 관찰 subtree하고 childList. 모든 MutationRecord 는 해당 addedNodes멤버에 추가 된 child노드를 보유합니다. 그런 다음 적절한 정보를 추출하기 위해 약간만 저어 주면됩니다. (모든 노드를 병합 flatMap하여 단일 목록을 갖습니다. 필터링 하여 요소 또는 속성 만 유지하고 nodeType결국 병합 버튼 노드를 선택합니다 .)

" 관찰자가 설정 되었기 때문에 페이지가 더 이상 변경되지 않으면 어떻게합니까? "를 제외하고는 대부분 작동 합니다. ”. playMusic트리거는 따라서 트리거되지 않을, 설정되지 않을 것입니다. 이것은 일어날 것 같지는 않지만 일어날 수 있습니다.

이 문제를 해결하기 위해 tampermonkey 에게 스크립트를 " 가능한 한 빨리 "실행 하도록 요청 했습니다 (위 참조 @run-at document-start). 우리는 어떤 이벤트도 놓치고 싶지 않습니다!

"하지만 기다려! 병합 모드를 선택하면 confirm merge버튼이 터지는 것을 볼 수 있습니다 . 그 정확한 순간에 돌연변이를 잡을 수 있어야하나요?!” 글쎄요, 그렇게 간단하지 않습니다.

이면에서 첫 번째 " Merge pull request "버튼 (최종 확인 아님)을 클릭하면 최종 버튼 이 표시 됩니다. 그러나 그들은 창조되지 않았습니다. 그들은 이미 존재했지만 숨겨졌습니다. 그리고 웹 페이지의 구조 ( Document Object Model 또는 DOM)는 실제로 수정되지 않습니다.

:: before 및 :: after는 클릭시 삽입되지만 DOM 수정을 트리거하지 않습니다.

다시 html로 트리를 보면 당신은 어떤 것을 발견 할 수 있습니다 CSS ::before 그리고 ::after이러한 요소가 만드는 우리의 버튼 주위에 삽입 된 또는 하지를 . 그러나 버튼 자체는 수정되지 않습니다. 동일 attributes, classes… 즉, a MutationObserver는 이러한 종류의 CSS 수정에 의해 통지되지 않습니다.

그러니 솔직히 말해서, 약간 덜 우아하더라도 페이지가 매번 명확하지 않은 방식으로 다시로드되는 일부 탬퍼 몽키 스크립트를 해킹하는 상황에서 러프를 사용 document.querySelectorAll하는 것이 필요에 응답하는 더 좋은 방법 일 수 있습니다.

두 가지 접근 방식을 결합하는 것도 가능합니다. 먼저 버튼이 있는지 확인하고 DOM에서 출현을 관찰 한 후에 만 ​​확인합니다. 질문에 대한 관심과 스크립트가 얼마나 " 진지 " 한지에 따라이 방법 을 사용할 수 있습니다. 그러나이 블로그 게시물에는 가지 않을 것입니다.

이제 그만 두겠습니다. 이제 병합 버튼을 클릭 할 때 수행해야하는 작업을 정의 할 수있는 충분한 방법이 있습니다.

이제하자 playMusic! 🎵

오디오를 재생하려면 간단 해 보입니다…

… 그리고 예, 일반적으로 작동합니다. 그러나 https://github.com/*/*/pull/*우리는이 오류가 있습니다.

Refused to load media from 'https://upload.wikimedia.org/wikipedia/commons/d/d9/Wilhelm_Scream.ogg' because it violates the following Content Security Policy directive: "media-src 'none'".

사이트의 콘텐츠 보안 정책은 원본이 콘텐츠 보안 정책 헤더에 포함되어 있지 않기 때문에 일부 리소스를 차단합니다.

CSP (콘텐츠 보안 정책)는 신뢰할 수있는 소스 목록을 정의하여 사이트의 보안을 개선하고 브라우저가이 목록의 리소스 만 실행하거나 렌더링하도록 지시합니다. 원본이 CSP에 나열되지 않아 사이트의 일부 리소스에 액세스 할 수 없습니다.

…한조각…

GitHub는 어떤 사이트에서든 미디어 입력을 읽을 수 없습니다! ( media-srcis none). 다시 우리는 뭔가를 해킹해야합니다.

Audio인스턴스에 URL을 제공하는 대신 데이터를 직접 다운로드합니다. 그런 다음 그 원시 물기를 일부에 연결하는 것이 우리의 의무 AudioContext입니다. 나는 이것에 너무 오래 가지 않을 것입니다, 당신은 거기에서 더 나은 자원을 많이 찾을 것입니다.

이 두 스크립트를 함께 연결하면 음악이 있습니다!

또 다른 도전? Tic tac tic tac boom!

GitHub에서 merge 를 클릭 하면 “Pull request successfully merged and closed ”가 인쇄 되기까지 몇 초가 걸립니다 .

이제 너무 늦었어요 ...

클릭 할 때 틱택 소음이 시작 되고 " 병합 성공 "메시지 가 폭발 하는 것이 좋지 않을까요 ?

여기에 몇 가지 주석이 포함 된 시도가 있습니다. 완벽 함과는 거리가 멀다. 자바 스크립트에 대해 잘 모른다는 사실을 잊지 마세요. 세 개의 tampermonkey 스크립트를 제외하고는 어떤 전면도 건드리지 않았습니다. 나는 당신의 제안을 기다리고 있습니다!

  • 동일한 사운드 컨텍스트를 사용하고 폭발 할 때 폭탄이 떨어지는 것을 음소거 할 수있는 일종의 전역 변수가 필요합니다. 나는 State그 목적 으로 수업을 사용합니다 .
  • 효과를 효율적 으로 사용하려면 타임 라인에서 " 병합 완료 "메시지가 표시 되는 정확한 시간에 폭발음이 발생해야합니다 . 그렇지 않으면 실제로 그렇게되지 않습니다.
    그래서 폭발음이 필요하다는 것을 알게되는 즉시 다운로드를 시작해야했습니다. " 병합 "버튼을 클릭했을 때 . 나는 그것을 위해 사용했습니다 Promise. 또한 GM_xmlhttpRequest표준과 관련하여 약간의 변형이 있으므로 (문서에서 : " 참고 : 세부 사항 동기 플래그는 지원되지 않습니다. ") 무언가를 해킹해야했습니다. 다시 웹에 이에 대한 리소스가 있습니다. 더 나은 방법을 알려주세요.
  • merge done ”메시지 를 감지하기 위해 mutations전역 쿼리 대신 작업을 했기 때문에 폭발음을 최대한 빨리 시작할 수 있습니다. 나는 그것을 놓치고 싶지 않기 때문에 “ start merge ”에 대한 전역 쿼리를 유지했고 여기서 약간의 지연을 수용 할 수 있습니다.

결론

나는 그 쓸모없는 도전을 좋아하고 항상 많은 것을 배웁니다.

또한 나는 자바 스크립트에 대해 거의 알지 못 하므로 관대하십시오. 또는 더 나은 이벤트 : 댓글로 저를 도와주세요!

탬퍼 몽키로 게임을 시작한다면 마지막 조언입니다. 페이지의 동적 요소와 상호 작용해야하는 이러한 종류의 스크립트를 시도 할 때 페이지에서 실제로 일어나는 일을 정확하게 이해하도록 노력하십시오. 요소가 나타나지 않는 경우, 그들은 삽입 또는 그 중 하나 classes또는 attributes수정됩니다? 아니면 일부 ::before또는 ::after CSS ? 😉

Tampermonkey 는 놀라운 도구입니다!

감사

Suggested posts

Jetpack Compose로 IntelliJ IDEA의 스플래시 화면 모방

Jetpack Compose로 IntelliJ IDEA의 스플래시 화면 모방

IntelliJ IDEA의 최신 버전 (이 출판 당시 2021.1)에는 아래와 같이 다양한 색상의 모양을 포함하는 그리드를 기반으로하는 멋진 스플래시 화면이 있습니다.이 게시물의 목표는이 패턴을 모방 한 Jetpack Compose 컴포저 블을 구현하는 것입니다.

개발자가 범하는 5 가지 일반적인 CSS 실수

CSS에서 어떤 실수를 했습니까?

개발자가 범하는 5 가지 일반적인 CSS 실수

웹 개발자로 이동 통신사를 시작하는 경우 CSS는 내 경험에 비추어 볼 때 많은 개발자에게 골칫거리입니다. 그것을 배우고 숙달하는 데는 시간이 걸립니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.