title attr shrinker

by noromanba 2017-02-23 [2017/02/23 08:30:44]

shrink too long title attribute

@@ -1,7 +1,7 @@
 /*
  * @title title attr shrinker
  * @description shrink too long title attribute
- * @include http://www.hatena.ne.jp
+ * @include http://www.hatena.ne.jp/
  * @license MIT License http://opensource.org/licenses/MIT
  * @javascript_url
  */
@@ -14,38 +14,39 @@
 //  http://q.hatena.ne.jp/1487159409
 //  http://q.hatena.ne.jp/images/question/1487159/1487159409.jpg
 
-// e.g.
-// http://www.hatena.ne.jp
+// hatenanews on http://www.hatena.ne.jp/ has been fixed
+
 (() => {
   'use strict';
 
-  const sliceString = (text, pattern) => {
-    return (text.match(pattern) || [])[1] || '';
-  };
-
   Array.from(document.body.querySelectorAll([
     '#s-hatenanews .js-bookmark-item a[href].list-img',
     '#s-hatenanews .js-bookmark-item a[href].list-link',
   ]), (link, idx) => {
+    if (!link.href) return;
+
     const shrink = () => {
       const xhr = new XMLHttpRequest();
 
       xhr.open('GET', link.href);
       xhr.timeout = 3000;
+      xhr.responseType = 'document';
 
       xhr.addEventListener('load', () => {
         if (xhr.readyState !== xhr.DONE || xhr.status !== 200) return;
 
-        // TODO more smart
-        const title = sliceString(xhr.responseText, /<title>([\s\S]+)<\/title>/);
-        const descr = sliceString(xhr.responseText, /<meta\s+name="twitter:description"\s+content="([^"]+)/) ||
-          sliceString(xhr.responseText, /<meta\s+property="og:description"\s+content="([^"]+)/);
+        const ctx = xhr.response.document;
 
-        const shrinked = title + '\n' + descr;
+        const title = (ctx.querySelector([
+          'head title'
+        ]) || {}).textContent || '';
+        const descr = (ctx.querySelector([
+          'head meta[property="og:description"][content]',
+          'head meta[name="twitter:description"][content]',
+        ]) || {}).content || '';
 
+        const shrinked = title + '\n' + descr;
         link.title = shrinked;
-        // for hatenanews on http://www.hatena.ne.jp
-        (link.querySelector('.list-text') || {}).textContent = shrinked;
       });
 
       xhr.send();
@@ -57,11 +58,3 @@
 
 })();
 
-// too long malformed title like this, raw html; WTF
-/*
-<a class="list-link js-bookmark-target" href="http://hatenanews.com/articles/2017/02/17/130000" title="さくら×メルカリ長野さん×はてな渡辺　巨大サービスを支えるインフラ事情を語り尽くすイベント開催！
-<p><span itemscope itemtype=&quot;http://schema.org/Photograph&quot;><img src=&quot;https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenanews/20170213/20170213151742.jpg&quot; alt=&quot;f:id:hatenanews:20170213151742j:plain&quot; title=&quot;f:id:hatenanews:20170213151742j:plain&quot; class=&quot;hatena-fotolife&quot; itemprop=&quot;image&quot;></span></p><p>
-...
-SNIP
-*/
-

• /*
   * @title title attr shrinker
   * @description shrink too long title attribute
   * @include http://www.hatena.ne.jp/
   * @license MIT License http://opensource.org/licenses/MIT
   * @javascript_url
   */
  
  // UserScript
  // https://gist.github.com/noromanba/26d1804fac23f76d9dfc
  
  // via
  // http://let.hatelabo.jp/a-kuma3/let/hJmeyNv-p802
  //  http://q.hatena.ne.jp/1487159409
  //  http://q.hatena.ne.jp/images/question/1487159/1487159409.jpg
  
  // hatenanews on http://www.hatena.ne.jp/ has been fixed
  
  (() => {
    'use strict';
  
    Array.from(document.body.querySelectorAll([
      '#s-hatenanews .js-bookmark-item a[href].list-img',
      '#s-hatenanews .js-bookmark-item a[href].list-link',
    ]), (link, idx) => {
      if (!link.href) return;
  
      const shrink = () => {
        const xhr = new XMLHttpRequest();
  
        xhr.open('GET', link.href);
        xhr.timeout = 3000;
        xhr.responseType = 'document';
  
        xhr.addEventListener('load', () => {
          if (xhr.readyState !== xhr.DONE || xhr.status !== 200) return;
  
          const ctx = xhr.response.document;
  
          const title = (ctx.querySelector([
            'head title'
          ]) || {}).textContent || '';
          const descr = (ctx.querySelector([
            'head meta[property="og:description"][content]',
            'head meta[name="twitter:description"][content]',
          ]) || {}).content || '';
  
          const shrinked = title + '\n' + descr;
          link.title = shrinked;
        });
  
        xhr.send();
      };
  
      const INTERVAL = 500;
      setTimeout(shrink, INTERVAL * idx);
    });
  
  })();
  
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。