disjukr / just-news

a userscript project that parses korean news site and then making more readable view

just-news

뉴스 사이트 기사 페이지에 접속하면 뉴스 본문외의 정보를 전부 제거한 뒤 페이지를 재구성하는 스크립트입니다.

모든 주요 웹브라우저(인터넷 익스플로러 제외)에 대해 최신 안정버전으로부터 한 버전 전까지만 지원합니다.

설치하기

just-news는 뉴스 기사 페이지에서 작동되는 유저스크립트이며, 자동으로 실행되기 위해서는 유저스크립트 플러그인의 도움이 필요합니다.

유저스크립트 플러그인 설치

유저스크립트 플러그인은 여러 종류가 있지만 just-news는 Tampermonkey 사용을 권장합니다. Tampermonkey는 크롬, 파이어폭스, 엣지, 사파리, 오페라 등의 웹브라우저를 지원합니다.

Tampermonkey 외에도 Greasemonkey, Violentmonkey, NinjaKit 등의 유저스크립트 플러그인이 있습니다.

스크립트 설치

유저스크립트 플러그인이 설치됐다면 위 링크를 클릭하면 자동으로 just-news 설치창이 뜹니다.

기여하는 법

버그 제보하기

just-news는 GitHub issue tracker를 사용합니다. 이슈는 https://github.com/disjukr/just-news/issues로 제보해주시기 바랍니다.

소스코드로 기여하기

1. 구현하고 싶은 뉴스 사이트를 정합니다.
   1. 뉴스 사이트가 하단의 지원 사이트 목록에 체크되어있지 않은지 확인합니다.
   2. 목록에 사이트가 없으면 추가합니다.
2. 구현합니다.
   1. src/sites.ts에 뉴스사 이름을 키로 갖는, 주소 패턴 목록을 추가합니다.
   2. src/impl 경로에 article 객체를 반환하는 parse 함수를 담은 모듈을 작성합니다.
      1. 모듈 이름은 뉴스사 이름으로 합니다.
      2. 비동기로 작동해야할 경우 Promise 객체를 반환하면 됩니다.
      3. 특정 뉴스기사에서만 작동하는 코드의 경우 해당 뉴스기사 url을 주석으로 적어주세요.
3. 지원 사이트 목록에 구현한 항목을 체크하고 Pull Request를 보냅니다.

소스코드 빌드하기

이 프로젝트는 webpack을 사용하여 just-news.user.js 파일을 빌드합니다. 빌드를 하기 위해 다음의 절차를 따라야 합니다.

1. nodejs를 설치합니다.
2. pnpm을 설치합니다.
3. pnpm install 명령을 실행합니다.
4. pnpm build 명령을 실행합니다.
   • pnpm build 명령은 minify된 결과물을 주기 때문에 처리가 너무 오래걸릴 수 있습니다. 빠르게 개발용 빌드를 얻고 싶다면 pnpm build:dev 명령을 사용하면 됩니다.
5. 저장소의 dist 폴더로 가면 빌드된 just-news.user.js 파일을 확인할 수 있습니다.

쉽게 개발버전 userscript를 테스트하는 법

Tampermonkey 등의 유저스크립트 플러그인을 사용하면 *.user.js 꼴의 주소로 들어갈 때 자동으로 재설치 화면을 띄워줍니다.

프로젝트를 빌드한 다음 dist 폴더의 번들 파일을 HTTP로 서빙해서 브라우저 탭을 열고 http://localhost:<포트>/just-news.user.js 주소로 들어가면 방금 빌드한 just-news를 재설치하는 화면이 뜹니다. 업그레이드 또는 재설치 버튼을 눌러주면 됩니다.

개발용 서버는 다음과 같이 띄울 수 있습니다:

$ npm run dev

유의사항

버그 제보 관련

• 특정 환경에서만 발생하는 버그는 제보시에 특정 환경(웹브라우저/OS 등)을 명시해주세요.
• 특정 뉴스사이트나 기사 페이지에서만 발생하는 버그 역시 제보시에 링크를 명시해주세요.

개발 관련

• article 객체는 src/index.ts에 정의된 Article 인터페이스를 따르도록 합니다.
  • 뉴스 페이지에서 해당하는 정보가 없을 경우 null값을 채워 넣습니다.
• 릴리즈는 사람이 직접 할 필요가 없습니다. GitHub Actions를 통해 just-news-bot이 자동으로 처리합니다.

털어내기

몇몇 뉴스 사이트들은 사이트 재구성 뒤에도 광고가 남아있을 수 있습니다. 재구성을 했는데도 남는 광고들은 cleanup 함수를 사용하여 털어내도록 합시다.

예시)

// 주의: iframe을 없애는게 대부분의 광고를 쉽게 없애버릴 수 있는 방법이긴 하지만
// 유투브 영상등을 포함한 뉴스기사의 경우, 단순히 iframe을 잡아서 날리면
// 실제 기사 내용이 사라지는 문제가 발생할 수 있습니다.
export const cleanup = () => $('#scrollDiv, iframe').remove();

cleanup 함수는 사이트 재구성이 일어난 뒤, 1초 주기로 매 번 호출됩니다.

가속하기

just-news는 기사 본문이 언제 전부 로드되었는지를 특정할 수 없으면 웹페이지가 전부 로드될 때까지 기다립니다. 로드할 필요가 없는 광고 등이 전부 로드될 때까지 기다린다면 때로는 사용자가 이미 뉴스를 절반정도나 읽은 다음에 사이트 재구성이 이뤄지곤 합니다.

이를 피하기 위해 readyToParse 함수를 구현하여 just-news에게 사이트 재구성을 시작할 시점을 알려줄 수 있습니다.

예시)

// 예를 들어 기사 본문이 있는 `#article` 엘리먼트 다음에
// 댓글이 들어있는 `#comments` 엘리먼트가 있다고 칩시다.
// `#comments`엘리먼트가 나타났다는 것은 기사 본문은 이미 로드돼있다고
// 가정할 수 있기 때문에 바로 파싱을 시작하면 됩니다.
export const readyToParse = () => waitElement('#comments');

지원 현황

just-news's Issues

아이뉴스24

http://news.inews24.com/php/news_view.php?g_serial=860573&g_menu=020300

TypeError: Cannot read property 'cloneNode' of undefined

사이트가 리뉴얼됐는지 기존 코드가 제대로 동작하지 않습니다.

지디넷 칼럼에서 작동 안함

http://www.zdnet.co.kr/column/column_view.asp?artice_id=20141104074223

include만 건드려도 될 것 같

IE 호환성: character entity

document.write에 < 및 >를 &lt; 및 &gt;로 바꿔쓸 경우 태그가 아닌 일반 텍스트로 인식되어 원하는 결과가 나오지 않습니다.

예시:
http://embed.plnkr.co/PfsHP4mMVA4v4WtLLwlW/preview

PS: 메인에 소개되지 않았지만 TrixIE로 IE에 유저스크립트를 추가할 수 있습니다.

Greasemonkey에서 안도는 것 같음

왜지

경향비즈

http://bizn.khan.co.kr/khan_art_view.html?artid=201410311921301&code=920100&med=khan

경향신문은 이미 구현돼있는데 UserScript include랑 where만 수정하면 되는지 따로 분기해야될지는 좀 봐야할 것 같..

시사IN Live 만화 가로폭 문제

http://www.sisainlive.com/news/articleView.html?idxno=22257
우측에 <script>가 들어있는 <table>을 제거하면 될 것 같습니다.

스포츠서울 구현

http://www.sportsseoul.com

월스트리트저널 코리아 리얼타임

http://realtime.wsj.com/korea/2014/10/13/%EB%B0%95%EC%9B%90%EC%88%9C-%EC%84%9C%EC%9A%B8%EC%8B%9C%EC%9E%A5-%EB%AF%B8%EA%B5%AD-%EC%96%B8%EB%A1%A0%EC%97%90-%EB%8F%99%EC%84%B1%EA%B2%B0%ED%98%BC-%EC%A7%80%EC%A7%80-%EB%B0%9C%EC%96%B8/

얼핏봐서는 기존 월스트리트저널 코드랑 호환될거 같기도..

TrixIE 소개 추가

여튼 메인에 Trixie도 추가해주시면<

코리아헤럴드 작동 안함

http://khnews.kheraldm.com/view.php?ud=20141111001137&md=20141111180830_BK&kr=1

역시 include...

아이뉴스24 광고 제거 안됨

http://joynews.inews24.com/php/news_view.php?g_serial=877155&g_menu=700100

한겨레 오류.

몇 차례 버그 리포팅을 했었는데, 피드백이 빠르다 보니 뭐라도 발견하면 바로바로 글 쓰게 되네요. :)

마찬가지로 모든 한겨레 페이지에서 그러는 것은 아닙니다만, 광고가 같이 파싱 되는 페이지가 있습니다.
http://www.hani.co.kr/arti/society/society_general/668944.html?_ns=c3

스크립트는 최신 버전 사용하고 있습니다.

---

그리고 여담으로 궁금한 게 있는데...
필요한 부분만 파싱 해서 body element를 재구성할 때,
margin-bottom을 500px으로 주는 특별한 이유가 있으신가요?
top 값은 50px인데 bottom만 500px라서 처음엔 오타라고 생각했는데,
몇 차례 업데이트를 했는데도 여전히 500px 길래 의도적으로 설정해두신 것이라고 판단했거든요.
버그 리포팅하는 김에 궁금해서 여쭤봅니다.
개인적으로는 업데이트마다 50px로 수정해서 사용하고 있습니다.

Parse image slideshow

http://www.reuters.com/article/2014/10/02/us-hongkong-china-idUSKCN0HN03Q20141002

확장자 변경

http://wiki.greasespot.net/Greasemonkey_Manual:Installing_Scripts

When the URL of a link is clicked or otherwise navigated to ends with .user.js, Greasemonkey will intercept the loading file by presenting the installation dialog.

한겨례, 리포터 네임. 오류.

아 그런데 여기다가 글 쓰는 거 맞죠?

http://www.hani.co.kr/arti/politics/defense/663370.html

링크에 접속해보면 리포터 네임을 제대로 파싱해오지 못하네요.
모든 페이지가 그런 것은 아닙니다만... 이러한 기사도 있네요.

jQuery is not working with Safari NinjaKit

jtbc not work

http://news.jtbc.joins.com/article/article.aspx?news_id=NB10639468

maybe include link problem

YTN 일부 페이지에서 광고 보임

• 브라우저: Mozilla Firefox Nightly
• 문제 페이지: http://www.ytn.co.kr/_ln/0103_201411190800481989

광고 삽입은 _IconAd_New_v1.1.js_에서 페이지 로딩 후 동적으로 이루어 지는것으로 보입니다. 타 사이트 구현을 참조하여 #scrollDiv를 제거해도 cleanup() 호출 시점때문인지 광고가 제거되지 않습니다. 또한 위 페이지 이외의 다른 기사에서는 나오지 않는 경우도 있습니다.

sbs 기자 이름 "undefined"

http://news.sbs.co.kr/news/endPage.do?news_id=N1002697236

"undefined" 말고 undefined를 넣어야 함

자체구현 jQuery 들어내기

@require 메타데이터를 이용하는 쪽이 좋을 것 같습니다:

• tampermonkey 지원: http://tampermonkey.net/documentation.php#_require
• greasemonkey 지원: http://wiki.greasespot.net/Third-Party_Libraries
• ninjakit 지원: http://os0x.hatenablog.com/entry/20100612/1276330696
• trixie도 지원하는지는 잘 모르겠네요. @saschanaz help

// @require    http://code.jquery.com/jquery-2.1.1.min.js

국민일보 일부 페이지 작동하지 않음

문제 페이지:

• http://news.kmib.co.kr/article/view.asp?arcid=0008864720&code=61121111
• http://news.kmib.co.kr/article/view.asp?arcid=0922851612&code=11131900

동아일보, 스포츠동아에서 일부 url 입력 시 감지를 못 합니다.

패턴이 참 이상한데,
http://news.donga.com/3/03/20141107/67723014/1도 되고
http://news.donga.com/Economy/3/03/20141107/67723014/1도 되고
http://news.donga.com/NyanCat/3/03/20141107/67723014/1 마저 됩니다. 스포츠동아도 같은 방식입니다.
해당 부분에 무엇이 들어가도 되고 무엇이 들어가면 안 되는지 아직 전부는 파악을 못 했기에 일단 이슈 먼저 세워봅니다.

비동기 파싱 지원

jews 객체를 완성시키기 전에 페이지 재구성을 하면 안되겠죠.
xhr 등을 사용하는 구현에서 파싱이 끝난 시점을 명시할 수 있도록 parse함수에다 done 인자를 넣어주어야 할 것 같습니다.

예시)

parse['EXAMPLE'] = function (jews, done) {
    jews.title = '[속보]jews 파운더 용사 탈출해...충격';
    jews.subtitle = undefined;
    jews.content = '<p>disjukr가 용사로 전직하는 대신 마법사가 되어 모두에게 충격을 안겨주고 있다.</p>';
    jews.timestamp = { created: undefined, lastModified: undefined };
    jews.reporters = [];
    setTimeout(function () {
        done(); // 파싱이 끝났다는 것을 명시해주어 페이지 재구성이 일어나도록 합니다.
    }, 1000);
    /**
     * setTimeout이나 xhr 등을 사용하는 경우 true를 반환하여
     * done 함수가 호출된 시점에 파싱이 끝난다는 것을 명시합니다.
     * 참이 아닌 값이 반환될 경우 파싱 로직은 동기라고 가정합니다.
     */
    return true;
};

뉴시스 파싱되지 않음

http://www.newsis.com/ar_detail/view.html?ar_id=NISX20140224_0012744751&cID=10401&pID=10400

에러 내용으로 봐선 약간 구조가 바뀐 듯합니다.

Testing

I think we need sample html pages for each site and expected result html pages to test basic functionality. Can we mock the root DOM and run jews.user.js against to it?

Parse reporter's mail on 코리아헤럴드

http://www.koreaherald.com/view.php?ud=20140918000715&kr=1

Current jews.reporters:

jews.reporters = (function () {
    var matches = /By\s+([^(]+)\(([^)]+)\)/.exec($('#articleText').contents().eq(-1).text());
    if (matches !== null) {
        return [{
            name: matches[1].trim(),
            mail: matches[2]
        }];
    } else {
        return [{
            name: undefined,
            mail: undefined
        }];
    }
})();

$('#articleText').contents().eq(-1).text() gives only whitespace at the above URL, also the regular expression won't work.

Jews does not work on Scriptish

I use Scriptish instead of Grease Monkey. and Jews does not working with Scriptish.

모바일 뉴스페이지, 포털사이트 뉴스페이지를 지원 사이트 목록에 추가할 예정

• 포털사이트 뉴스페이지 목록 추가
• 모바일 뉴스페이지 목록 추가

한국일보: www 없는 주소에서 작동되지 않음

see 798e935

허핑턴포스트 기사 작성자 필드 오류

http://www.huffingtonpost.kr/2015/01/26/story_n_6544542.html?1422257219

일부 링크에서 헤럴드경제 작동 안함

http://news.heraldcorp.com/view.php?ud=20141023000202&md=20141023091209_BK

userscript include 부분을 고쳐야할 것 같습니다

한겨레 사진

http://www.hani.co.kr/arti/society/society_general/667221.html
'박원순 서울시장' 사진, 페이지 재구성후 누락

한겨례 www 없는 주소에도 대응하게 해주세요.

http://hani.co.kr/arti/society/society_general/667719.html?_fr=mt1

가끔 링크 타고 들어가다 보면 www.가 없을 때도 있는데 이럴 때 대응하지 못하네요.
// @include http://hani.co.kr/arti/*
를 추가해주시거나 아니면 정규식으로 통합해주셨으면 좋겠습니다.

감사합니다. 힘내세요.
가장 애용하는 유저 스크립트에요.

시사IN Live 구현

http://www.sisainlive.com

나우뉴스 구현

http://nownews.seoul.co.kr

한겨레 photo-view-area의 description 스타일 어떻게 안될까요?

http://www.hani.co.kr/arti/culture/music/671129.html?_ns=c1
http://www.hani.co.kr/arti/society/society_general/671165.html?_ns=c3

jews 없이 그대로 봤을 때...
photo-view-area 클래스 하위,
description 클래스에 background #595959 가 적용되어있거든요.
그래서 photo-view-area과 실제 contents 부분의 경계가 확실합니다.

jews로 보게 되면 경계가 없어서 어색할 때가 있어요.
1번 링크는 별 느낌 없지만...
2번 링크처럼 삽입한 사진을 찍은 기자가 있다면,
간단한 설명과 기자 이름, 그리고 기자 이메일이 포함되어있습니다.
개인적으로 이런 경우가 좀 어색해 보이고,
마찬가지로 스타일을 다르게 주어 구분을 해주시면 더 좋지 않을까 합니다.

Subtitle

most of news sites has title, subtitle, content. but jews only has title, content.

refactoring

각 항목을 수정할 때마다 스크롤해야 하는 불편함이 있다는 이야기를 두 명 이상(@xnuk, @kall)에게서 들었습니다.

근데 title / content / timestamp / reporters로 단락이 구분되어 있으니까 코드 고칠 때 스크롤이 신나게 왔다리 갔다리 하는 거 같네요 - by @xnuk: https://twitter.com/x_nuk/status/508618064410066944

저도 이젠 저 부분을 개선해야겠다는 생각이 드는데,

where를 구하던 switch ... case 절에서 바로 jews 객체를 반환하는 것이 좋을지,
where는 구하고 pass를 하나 더 두어서 switch (where) ... case pass에서 jews 객체를 반환하는 것이 좋을지,
아니면 다른 방법(예: 스크립트 파일을 여럿으로 쪼개서 하나로 빌드하는 등)을 사용하는 것이 좋을지 의견 받습니다.

민중의소리

http://www.vop.co.kr/A00000825344.html

ㄷㄷㄷ

kbs 동영상 정보 살리기

예시

• kbs: http://news.kbs.co.kr/news/NewsView.do?SEARCH_NEWS_CODE=2922636
• mbc: http://imnews.imbc.com/replay/2014/nwdesk/article/3522010_13490.html

데일리한국

http://daily.hankooki.com/lpage/politics/201412/dh20141219103740137430.htm
얼핏 보기엔 서울경제랑 똑같네요. 같이 묶어서 처리하면 될까요?

아시아투데이 scrollDiv 광고 제거되지 않음

http://www.asiatoday.co.kr/view.php?key=20150209010005438

이데일리 포토 이미지 포함되지 않음

후처리

jews가 사이트를 날려버린 뒤에도 뉴스 사이트의 몇가지 이벤트들이 남아서 광고를 띄워버리는 문제가 있음.
광고를 찾아낼 것이다...

서울신문 작동 안함

http://seoul.co.kr/news/newsView.php?id=20141204500025

include에 www 넣어야할 것 같습니다

브라우저별, 뉴스 사이트별 스크립트 정상실행여부 테스트 필요

#57 이 PR에서 스크립트가 실행되는 이벤트가 변경되었으므로 브라우저별, 사이트별로 스크립트가 정상실행되는지 확인할 필요가 있습니다. (별 생각 없이 바로 Merge한 제 잘못이 큽니다만..)

현재(ed514a8) 체크된 사이트에 대해서 크롬 브라우저에서는 전부 정상작동하며 스크립트가 실행되는 시점은 더 빨라졌음을 확인하였습니다.

사파리, 인터넷 익스플로러에 대해서는 각각 @yous 님, @saschanaz 님께서 확인을 해주시면 감사하겠습니다.

Wrong timestamp

http://world.kbs.co.kr/english/news/news_Po_detail.htm?No=105092&id=Po

parsedData[0].textContent
=> "Write : 2014-09-04 13:32:45"
parsedData[1].textContent
=> "Update : 2014-09-04 14:29:37"

"Write : " and "Update : " should be stripped.

Parse pages of ITWORLD

See http://www.itworld.co.kr/news/91221.

Extra vertical padding of facebook widget on 국민일보

http://news.kmib.co.kr/article/view.asp?arcid=0008739100&code=61121111&sid1=soc&sid2=0001

use another field name to 'jews.pesticide'

'jews.pesticide' is likely to be misinterpreted.
it originally means, remove ads(not jewish people) to make just news which i intended.