소개

동영상을 보면서 가로 방향의 동영상을 세로로 표시한 경험이 없습니까? 예를 들면 이런 느낌입니다.

이런 느낌으로 (위의 이미지는 당연한 이미지를 가져오고 있기 때문에 종횡도 거짓말도 없습니다만…) .

할 일

저자는 Google 크롬을 사용하고 있으므로 Chrome 용 확장 기능을 만들어갑니다. 덧붙여서 브라우저는 Chrome이 추천합니다. 왜냐하면 확장 기능을 넣는 것이 매우 간단하기 때문입니다(후술).

개요로서는 ctrl+화살표 키로 조작을 하고 싶습니다. 오른쪽을 누르면 오른쪽으로 90도 회전, 왼쪽을 누르면 왼쪽으로 90도 회전한 상태가 되도록 하고, 위를 누르면 회전을 되돌리도록 써 갑니다.

설정

우선 json 파일을 작성합니다. 이것은 확장 프로그램의 일반 설정을하는 곳입니다.
이름과 버전, 실행 방법 및 파일을 작성합니다. 여기에서는 자신용으로 로컬로 실행할 뿐이므로, 최소한 써야 할 것을 씁니다.

manifest.json

{
    "manifest_version": 2,
    "name": "rotate",
    "version": "1.0",

    "browser_action": {
        "default_title": "rotate"
    },
    "content_scripts": [
        {
          "matches": ["http://*/*", "https://*/*"],
          "css": ["rotate.css"],
          "js": ["rotate.js"]
        }
    ]
}

"content_scripts"라는 곳에 파일을 작성하면 웹 페이지의 html에 대해 작업을 수행하는 css,js 파일을 지정할 수 있습니다. 페이지는 모든 페이지에 대해 수행하도록 설정되어 있습니다.

CSS

CSS에서는 회전했을 때 지정하는 클래스를 써갑니다. 회전 각도는 오른쪽으로 지정합니다.

rotate.css

.rotate-right{
    transform: rotate(90deg);
}

.rotate-left{
    transform: rotate(270deg);
}

자바스크립트

JS에서는 키를 눌렀을 때 CSS에서 설정한 클래스를 부여하도록 합니다. 키의 동시 누름을 인식해야 합니다만, ctrl키에 관해서는 event.ctrlKey로 T/F가 돌아오므로 그것을 사용합니다.

rotate.js

var video = document.querySelector('video');

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey){
        if (event.keyCode == 37){ //左
            video.classList.add("rotate-left")
            video.classList.remove("rotate-right")
        } else if (event.keyCode == 39){ //右
            video.classList.add("rotate-right")
            video.classList.remove("rotate-left")
        } else if (event.keyCode == 38){ //上
            video.classList.remove("rotate-left")
            video.classList.remove("rotate-right")
        }
    }
});

정중하게 쓰면 remove 전에 contains로 유무를 확인해야 할지도 모르지만, 이것으로 움직이기 때문에 충분할 것입니다.

Chrome 설정

먼저 오른쪽 상단의 확장 기능 아이콘(?)을 눌러 하단 확장 기능 관리를 누릅니다.


그런 다음 오른쪽 상단의 개발자 모드를 활성화하고 패키징되지 않은 확장 기능 로드를 누릅니다. 그러면 폴더를 선택할 수 있으므로 manifest.json이 있는 폴더를 지정하면 로드됩니다. 쉽다.


확장 기능을 업데이트했을 때는 이 페이지에서 로드 버튼을 눌러 페이지를 다시 로드하면 적용됩니다.

표시는 이렇게 되었습니다. 크기에 대해서는 복수의 페이지에 대응시키고 싶은 관계상 지정하고 있지 않고, 회전 중심도 중심인 채이므로 주위에 테두리가 생겨 버리고 있습니다만, 허용 범위이지요. 만약 이 페이지에만 사용하고 싶은 것 같은 것이라면, 딱이 되도록(듯이) 설정해도 좋을 것 같습니다.

참고문헌

Chrome 브라우저의 확장 기능을 만들어 보고 싶은 초보자용으로 개발 방법을 소개! 【샘플 있음】