Open6

Chrome拡張機能の開発入門

ドワイトドワイト

ひとまずの目標は、自分用に観に行きたい美術館の展示についてSpreadSheatにまとめる拡張機能の開発。
Browser Actionを用いて、下記情報の保存を支援。

  • 企画展の名前
  • 美術館名
  • 会期
  • 企画展の紹介URL（現在開いているページ）
ドワイトドワイト

ざっくりのイメージ
(Chrome拡張機能のcookbook.geolocation-popupをベースに改編)

popup.html
<!DOCTYPE html>
<head>
  <title>exibitionRegister - popup</title>
</head>
 <meta charset="UTF-8">

<body>
  <h1>イベント登録</h1>
  <label for="exhibition" >企画展名</label>
  <input type="text" name="exhibition" size="10">
  <label for="hallName" >会場名</label>
  <input type="text" name="hallName" size="10">
  <label for="start" >開始日</label>
  <input type="date" name="start" value="2023-10-23">
  <label for="end" >終了日</label>
  <input type="date" name="end" value="2023-10-23">
  <button type="submit">登録</button>
</body>
ドワイトドワイト

javascriptの関数入れたいが、インラインコードは有害であるという考え方により制限されている模様。
回避方法は以下の通り

  • 変更前
<script>
    function doAmazingThings() {
    alert('YOU AM AMAZING!');
    }
</script>
<button onclick='doAmazingThings();'>Am I amazing?</button>
  • 変更後
amazing.html
<!-- amazing.html -->
<script src='amazing.js'></script>
<button id='amazing'>Am I amazing?</button>
amazing.js
// amazing.js
function doAmazingThings() {
    alert('YOU AM AMAZING!');
}
document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('amazing')
    .addEventListener('click', doAmazingThings);
});

https://web.dev/articles/csp?utm_source=devtools&hl=ja#inline_code_is_considered_harmful

ドワイトドワイト

とりあえず企画展名だけ、ボタンを押したらクリップボードにコピーするように作成

popup.html
<!DOCTYPE html>
<head>
  <title>exibitionRegister - popup</title>
  <script src="getExhibitionInfo.js"></script>
</head>
 <meta charset="UTF-8">

<body>
  <h1>企画展登録</h1>
  <label for="exhibition" >企画展名</label><br>
  <input type="text" id="exhibition" name="exhibition" size="20"><br>
  <label for="hallName" >会場名</label><br>
  <input type="text" id="hallName" name="hallName" size="20"><br>
  <label for="start" >開始日</label><br>
  <input type="date" id="start" name="start" value="2023-10-23"><br>
  <label for="end" >終了日</label><br>
  <input type="date" id="end" name="end" value="2023-10-23"><br><br>
  <button id="copy" type="button">登録</button>
</body>
getExhibitionInfo.js
function register(){
    exhibitionName=document.getElementById('exhibition').value;
    navigator.clipboard.writeText(exhibitionName);
}

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('copy')
    .addEventListener('click', register);
});
ドワイトドワイト

ひとまず今日の終わり

popup.html
<!DOCTYPE html>
<head>
  <title>exibitionRegister - popup</title>
  <script src="getExhibitionInfo.js"></script>
</head>
 <meta charset="UTF-8">

<body>
  <h1>企画展登録</h1>
  <label for="exhibition" >企画展名</label><br>
  <input type="text" id="exhibition" name="exhibition" size="20"><br>
  <label for="hallName" >会場名</label><br>
  <input type="text" id="hallName" name="hallName" size="20"><br>
  <label for="start" >開始日</label><br>
  <input type="date" id="start" name="start" value="2023-10-23"><br>
  <label for="end" >終了日</label><br>
  <input type="date" id="end" name="end" value="2023-10-23"><br><br>
  <button id="copy" type="button">登録</button><br><br>
  <label for="urlDisplay">URL:</label><br>
  <label id="urlDisplay">URLがここに表示されます</label>

  <label for="output">出力</label><br>
  <input type="text" id="output">
</body>


function register(){
    // alert('ボタンが押されました1');
    console.log("register()");

  exhibitionName=document.getElementById('exhibition').value;
  hallName=document.getElementById('hallName').value;
  start=document.getElementById('start').value;
  end=document.getElementById('end').value;
  url=document.getElementById('urlDisplay').textContent;

//   navigator.clipboard.writeText(exhibitionName);

  output=document.getElementById('output');
//   output.innerText=exhibitionName+','+hallName+','+start+','+end;
  output.value=exhibitionName+','+hallName+','+start+','+end+','+url;
  console.log(output.value);
    
}

// function getCurrentTabUrl(){
    console.log('getCurrentTabUrl');
    chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
        const url = tabs[0].url;
        // ここで取得したURLを使用して何かしらの処理を行うことができます
        console.log(url); // URLをコンソールに表示
        // この例では、取得したURLをpopup内の要素に表示する
        document.getElementById('urlDisplay').textContent = url;
      });

// }

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('copy')
    .addEventListener('click', register);
});

//popupが開かれたときにgetCurrentTabUrl()を呼び出す
// document.addEventListener('DOMContentLoaded', getCurrentTabUrl);