원하는 작업: 컨텍스트 메뉴에서 복사한 정보의 내역 페이지에서 항목 삭제 및 다시 복사
했던 일: 일단 삭제와 다시 복사가 가능해졌습니다.
【소스 코드】【R Chrome Extension - Chrome 웹 스토어】(일단 공개하고 있습니다)

마지막 회의

전회, 우클릭으로부터 선택한 카피 내용을 이력 페이지(일단 옵션 페이지를 이용)해, 표시의 확인까지는 할 수 있도록 했습니다.
(기사를 공개한 것이 v0.0.5.0에서, 거기에서 약간의 결함이나, 보기 좋게 변경을 하고, v0.0.5.3의 시점까지를 GitHub에 공개했습니다)

지난 번의 약간의 버그

히스토리의 1번째에 undefined 가 표시되고 있었습니다만, 데이터가 없는 경우의 초기화로 다음과 같이 하고 있었기 때문입니다. 이 정도의 실수를 하는 레벨입니다.

//誤
if (saveData==null)
  saveData = [{}];
//正
if (saveData==null)
  saveData = [];

이번 구현 내용

복사 및 삭제 아이콘을 준비하고 복사를 클릭하면 해당 항목의 내용을 클립 보드에 복사하고 삭제를 클릭하면 해당 항목을 삭제하여 화면을 다시 표시합니다.

먼저 기본 태그 문자열을 이런 식으로 정의해 둡니다.

const tag1 = "<tr><td>{0}</td><td>{1}</td></tr>"
const tag2 = '<input type="image" id="btnCopy" src="copy_16.png" alt="コピー" value="{0}"><input type="image" id="btnRemove" src="trash_16.png" alt="削除" value="{1}">'

그런 다음 각 요소를 만들고 바꿉니다.

items.CopyData.reverse().forEach(x=>{
  const tbl = $("#copyTable");
  switch (x.Type){
    case "TITLE":
      tbl.append(fs(tag1, [fs(tag2, [fs("[{0}]({1})", [x.Data.Url, x.Data.Title]), index--]), fs("<a href={0}>{1}</a>", [x.Data.Url, x.Data.Title])]));
      break;
    case "IMG":
      tbl.append(fs(tag1, [fs(tag2, [x.Data, index--]), x.Data]));
      break;
    default:
      tbl.append(fs(tag1, [fs(tag2, [escapeHtml(x.Data), index--]), fs("<pre>{0}</pre>", [escapeHtml(x.Data)])]));
      break;
  }
});

전시는 새로운 것을 위로 하기 위하여, reverse 했습니다.fs는 이전에 만든 formatString입니다. 조금 함수명이 길기 때문에, 이 스크립트내에서의 별명으로서, const fs = (fmt, ary)=>{ return formatString(fmt, ary); } 와 같이 하고 있습니다. 별로 바람직한 방법은 아니지만, 지금은 하고 싶은 것을 실현시키기 위해서 시행착오하고 있는 단계이므로, 좋다고 둡니다.

첫 번째 tag1 바꾸기에서 {0}를 tag2로 바꿉니다.tag2 의 {0} 의 치환으로 화면상에 표시하는 내용으로 하고 있습니다.
덧붙여 이스케이프에 대해서는, 참고 기사의 코드를 통째로 빌려 받고 있습니다.

이제 오이타 사용물이 되는 확장 기능이 되어 왔습니다.

그리고는, 지능적인 카피를 실시할 수 있도록(듯이), 세세하게 태그등에 응한 표시나, 재카피를 실시할 수 있도록 가시가시 짜 가는 것이 될까 생각합니다.

미래에 대해

오이타 하고 싶은 일이 생긴 것과 그것에 대한 방법을 알게 된 대로입니다.
지금까지는 그 과정을 늘어뜨렸기 때문에, 어딘가의 타이밍에 정리해, 사람이 참고할 수 있는 기사로 하고 싶습니다.
또, 이 확장 기능에 대해서도, 추가적인 기능 확장으로서, 클립보드헤의 붙여넣기를 감시해, 다른 카피도 이력에 올려놓거나, 캡쳐 관련의 기능을 충실시키면, 진심으로 사용할 수 있는 것이 되지 않는다 라고 생각합니다.

움직여 본 느낌

있어~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 테헤.

이상


지난번
목록
다음 번


복사한 기록을 알 수 있도록
시리즈 일람
지금까지의 내용 정리