NOMO.asia

웹툰, 웹소설을 볼 때 주로 스마트폰 어플을 이용해서 보지만, 큰 화면으로 보기 위해서 PC의 웹브라우저를 이용하는 경우가 종종 있다. 그런데 일부 사이트들이 이전화, 다음화로 넘길 때 키보드의 좌우 방향키를 이용한 전환을 지원하지 않아서 불편했다. 그래서 좌우 방향키를 이용해 이전/다음화를 넘길 수 있는 기능을 Userscript 를 이용하여 만들었다.

꼭 소설, 웹툰 사이트만이 아니라 몇몇 사이트에서 이전, 다음 글로 넘길 때도 활용하고 있다.


이전, 다음 버튼을 찾아내기 위한 조건은 다양하다.

이전화, 다음화로 넘어가는 버튼 링크에 해당하는 a 태그의 attribute에 '이전', '다음' 이라는 단어가 포함된 title 이 달려있거나

a 태그 내의 span 안에 '이전', '다음'과 같은 단어가 포함되어 있거나... 등 이었다.


일단 내가 가는 사이트들만 분석해보고 조건을 넣은거고,

예상가능한 경우는 아주 많이 있지만 작성해두지 않아서 당연히 모든 사이트에서 동작하지 않는다.


사이트를 추가하고 싶다면 @include 에 원하는 사이트 주소를 추가하고

// add new conditions here 아래에 조건을 추가하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
// ==UserScript==
// @name        WebtoonKeyDownHelper
// @namespace   WebtoonKeyDownHelper
// @author      Nomomo
// @description It supports new function to turn webtoon's page with the keyboard direction key.
// @version     0.0.1
// @include     *.*toon*.*
// @include     *novel*.*
// @grant       none
// @run-at      document-start
// ==/UserScript==
/*jshint multistr: true */
 
console.log("RUNNING WebtoonKeyDownHelper");
const PREV = -1;
const NEXT = 1;
 
function findButton(TYPE){
  var res = undefined;
   
  $("a").each(function() {
    var temp = checkCondition(TYPE,$(this));
     
    if(temp !== undefined){
      res = temp;
      return false;
    }
  });
   
  return res;
}
 
function checkCondition(TYPE, target){
  if(target.length === 0) return undefined;
   
  // add new conditions here
  // c1 : title
  var title = target.attr("title");
  // c2 : title >> span
  var span = target.find("span.text").html();
   
  if(TYPE === NEXT){
    if(indexOfCompare(title,"다음")){
      return target.attr("href");
    }
     
    if(indexOfCompare(span,"다음")){
      return target.attr("href");
    }
     
  }
  else if(TYPE === PREV){
     if(indexOfCompare(title,"이전")){
      return target.attr("href");
    }
     
    if(indexOfCompare(span,"이전")){
      return target.attr("href");
    }
  }
   
  return undefined;
}
 
$(document).keydown(function(e) {
  var href = "";
    switch(e.which) {
        case 37: // left
        href = findButton(PREV);
        if(href !== undefined) location.href = href;
        break;
 
        //case 38: // up
        //break;
 
        case 39: // right
        href = findButton(NEXT);
        if(href !== undefined) location.href = href;
        break;
 
        //case 40: // down
        //break;
 
        default: return;
    }
    if(href !== undefined) console.log("MOVE TO : " + href);
    e.preventDefault(); // prevent the default action (scroll)
});
 
function indexOfCompare(obj,text){
  if(obj === undefined){
    return false;
  }
   
  if(obj.indexOf(text) !== -1){
    return true;         
  }
 
  return false;
}