블로그스팟 에디터 개조 스크립트 만들기 - 구글 문서도구 버튼 생성 / 에디터 가로 폭 확장

by개망초 •
0
다른 블로그 서비스에 비해 답이 없는 블로그스팟의 에디터...
기본적이라 할 수 있는 표 기능도 없고, 불편한 부분이 한 두 군데가 아니다.


그래서 나는 Tampermonkey 라는 부가기능을 통해 어떻게든 이 블로그스팟 에디터를 보완해서 쓸려고 한다. (확장기능을 추가하려면 여기를 클릭)
그렇게 해서라도 글쓰기 환경을 조금이라도 개선시켜 보고 싶다.
구글 놈들은 사실상 방치해놓고 있으니, 목마른 사람이 우물 파야지 뭐 어쩌겠어...


1. 구글 문서도구 버튼 생성

표 생성 기능을 바로 스크립트로 구현하면 좋겠지만, 아쉽게도 아직 그럴 능력이 없으니 구글 문서도구(링크)에서 표를 만들고, 그 표를 에디터에 복붙하는 식으로 대체한다.


문서 하나를 생성한 다음, 공유 링크를 어딘가에 복사해놓는다.


2. 에디터 가로 폭 확장

블로그스팟 에디터의 가로폭은 기본이 700px로 되어있다. 그리고 해당 폭은 '.a89Sje' 라는 클래스에서 관리하고 있다.
저 클래스 이름은 2021년도 웹문서에도 보이는 걸로 봐서, 사실상 고정되어 있는 것 같다. 그렇다면... 스크립트로 max-width의 값을 960px로 고정시켜보도록 한다. (960px는 현재 내가 쓰는 Feedify 스킨의 본문 폭과 비슷한 값이다.)

이렇게 1차로 완성한 블로그스팟 에디터 스크립트는 다음과 같다.


※ 스크립트 내용

// ==UserScript==
// @name         Blogspot Editor Make Google Docs button
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       k66google
// @match        https://www.blogger.com/blog/post/edit/*
// @match        https://www.blogger.com/blog/posts/*
// @grant        none
// @require      https://code.jquery.com/jquery-3.3.1.min.js
// ==/UserScript==


// 페이지를 다 불러온 다음에 실행.
$(document).ready(function() {

    //도구 모음에 버튼 생성
    function createInput(){
    var $input = $('<input type="button" id="gdocs" value="구글 문서 열기" />');
        $input.appendTo($("div[aria-label='도움말 및 의견']:first").parent()); //버튼이 속한 class를 알아낸 뒤, 거기의 부모 div에 버튼 삽입.
}
    createInput();

    $('#gdocs').on('click', function() {

      window.open("https://docs.google.com/document/자신의 구글 문서 파일/edit");
    });

    function fix_editor(){
           //에디터 폭을 960px로 변경.
            $(".a89Sje").css({"max-width": "960px"});
    }
    //존재 여부를 파악하기 위해 0.3초마다 확인.
     var repeat = setInterval(fix_editor, 300);

});


설치 방법은...
Tampermonkey 아이콘 클릭 - '새 스크립트 만들기' - 전부 삭제한 뒤 위의 스크립트 복붙하고 문서도구 경로 수정 - '파일' 메뉴의 디스켓 모양 '저장'을 누르면 된다.
(구글 문서 파일의 경로만 자기 사정에 맞게 바꿔준다.)

이렇게 하면 다음부터는 에디터에 들어갈 때 가로 폭이 960px로 확장되어서 좀 더 글쓰기 환경이 쾌적해질 것이다.
또한 '?' 아이콘 옆에 '구글 문서 열기' 버튼이 생겨서 바로 문서 도구 쪽에 들어갈 수 있다.
하지만 내 목표는 문서 도구가 아닌 이 스크립트만으로 표를 만드는 것이다. 그럴려면 시간이 좀 더 필요할 것 같다.
그럼 이만...


* 추가사항
표 삽입/설정 및 썸네일 지정이 가능한 2차 스크립트 버전이 나왔습니다. 아래 게시물을 참조해주세요.
https://www.k66google.com/2023/10/blogspot-editor-fix-2.html


카테고리

댓글 쓰기

다음 이전