Qiita를 확장하고 싶습니다.

최근 Qiita에서의 조사물의 빈도가 증가해 온 나는, 문득 이런 일을 생각했다.
왜 검색 화면에 미리보기 기능이 없을까
망설이지 않는다고 생각하시는 분, 정답입니다.
하지만 심야 텐션은 무서워요.
이런 생각을 한 결과,
확장 기능 만들면 좋잖아 www
되었습니다.

그러면 어떤 느낌이 되었는지를 봅시다.

이런 느낌의 이미지

영화
htps: //같다. 베/8_t3_7xゔぇ에
이미지

How it works

이번에도 Contents_script를 이용하여 작성했지만,
이번에는 Bootstrap뿐만 아니라 Jquery와
Markdown을 Html로 만듭니다.
Marked를 도입한 후에 작성했습니다.
움직임으로는
Jquery와 Marked가로드됩니다.
메인 스크립트가 페이지 생성 후 실행
·이 타이밍에서 버튼 생성
버튼을 누르면 이벤트 발화
· 여기서 QiitaAPI를 사용하여 기사 정보 취득
＝＞Marked로 어쩐지 성형
(코드 등 일부 특수한 것은 읽을 수 없었던 것 같다?)
(URL이 긴 녀석이라면 화면 밖에서 나왔다.
replace로 대체했다. )
마지막으로 적당히 Append 해 둔다

체크포인트 1
이번 코드 작성에 있어서 Qiita에서 본래 사용되고 있는,
Bootstrap의 Flex에 방해 받기 때문에,
CSS를 다음과 같이 비활성화 (& 가시성 향상)

.tr-Item{
display:block !important;
}
.p-home_container {
    max-width: 3000px !important;
}

(이 변경으로, 화면 폭이 일정 이하로 일부 요소가 아래로 가거나 합니다)

체크 포인트 2
처음에는 전혀 작동하지 않았고 마음이 부러 졌기 때문에,
처음 생각했던 tooltip 형식을 그만둔 순간,
잘 작동했습니다. (왜?)

코드군

$(document).ready(function () {
  $(".tr-Item_meta,.tf-ItemContent_meta,.ms-ItemContent_meta,.searchResult_sub").append("<button id='make_pre' class='btn btn-primary'>Preview_show</button>")
});
$(document).on('click', '#make_pre', function () {
  console.log($(this).parent().attr("class"))
  if ($(this).parent().attr("class")==="searchResult_sub"){

    if ($(this).parent().next("#pre").length) {
      $(this).parent().next("#pre").remove()
    } else {
      const url = $(this).parent().prev().find(".searchResult_itemTitle").find("a").attr("href");
      console.log(url)
      const pos = this
      const req = url.replace(/\/.*\/items\//g, "/api/v2/items/")
      $.getJSON("https://qiita.com" + req, function (data) {
        console.log(data.body)
        const content = "<div id='pre' class='card'><h1>Preview</h1><br>" + marked(data.body.replace(/\(http.*\)/g, "[URL]")) + "</div>";
        $(pos).parent().parent().append(content);
      })
    }
  }else{
  if ($(this).parent().next("#pre").length) {
    $(this).parent().next("#pre").remove()
  } else {
    const url = $(this).parent().prev().attr("href");
    console.log(url)
    const pos = this
    const req = url.replace(/\/.*\/items\//g, "/api/v2/items/")
    $.getJSON("https://qiita.com" + req, function (data) {
      console.log(data.body)
      const content = "<div id='pre' class='card'><h1>Preview</h1><br>" + marked(data.body.replace(/\(http.*\)/g, "[URL]")) + "</div>";
      $(pos).parent().parent().append(content);
    })
  }
}
});

메인 코드
낭비밖에 없다.

{
  "name": "qiita_smart_preview",
  "version": "1",
  "description": "qiita。\nUsing by jquery and bootstarp4",
  "content_scripts": [{
    "js": ["jquery-3.5.1.min.js","marked.min.js","background.js"],
    "css":["bootstrap.min.css","css.css"],
    "matches": ["https://qiita.com/*"],
    "run_at": "document_end",
    "all_frames": true
  }],
  "icons": {
    "48": "images/icon.png"
  },

  "manifest_version": 2
}

매니페스트
전회와 그다지 변하지 않는다.

요약

Jquery 편리하지만 This의 상속을 잊어 버리려고 생각했다.
(안의 Function에서 This 어째서 무리나-응 어리석고 있었습니다.)

const pos = this

오시마
(원한다고 코멘트받은 새벽에는,
Github에 코드를 업로드하려고합니다.
=> 코드 관리 일절하지 않았을 뿐)