プログラミングで推しクリエイターの新規投稿をGet！ポチッ

{
  "manifest_version": 3,
  "name": "Data Fetcher",
  "version": "1.0",
  "permissions": [
    "activeTab",
    "tabs",
    "scripting",
    "storage"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "48": "icon.png"
  },
  "host_permissions": ["http://*/*", "https://*/*"]
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Fetch Data</title>
  <style>
    body { width: 300px; }
    button { margin: 20px; }
  </style>
</head>
<body>
  <button id="fetchData">推しメンタイムライン確認</button>
  <script src="popup.js"></script>
</body>
</html>

document.getElementById('fetchData').addEventListener('click', () => {

  const initialUrl = "https://note.com/following";

  chrome.tabs.query({ url: initialUrl }, (tabs) => {
    if (tabs.length > 0) {
        // URLが既に開かれている場合、そのタブをアクティブにする
        chrome.tabs.update(tabs[0].id, { active: true });
        console.log('Tab created, ID: ' + tabs[0].id);
        chrome.runtime.sendMessage({ action: 'fetchData', tabId: tabs[0].id });
    } else {
        // URLが開かれていない場合、新しいタブで開く（未実装）
        // chrome.tabs.create({ url: initialUrl });
        // chrome.runtime.sendMessage({ action: 'fetchData', tabId: tab.id });
    }
});
});

  "background": {
    "service_worker": "background.js"

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'fetchData') {
    chrome.scripting.executeScript(
      {
        target: { tabId: request.tabId },
        function: fetchDataFromNote
      },
      (result) => {
        if (chrome.runtime.lastError) {
          console.error('Script execution failed:', chrome.runtime.lastError.message);
          return;
        }

        if (Array.isArray(result) && result.length > 0 && result[0].result) {
          const fetchedData = result[0].result;
          console.log('Script executed, result:', fetchedData);

          // データをループして処理する
          fetchedData.forEach(data => {
            console.log('Fetched Data:', data);
            // ここでデータの処理を行う（例: データを保存、表示など）
          });

          chrome.storage.local.set({ fetchedData: fetchedData });
          chrome.tabs.create({ url: 'data.html' });
        } else {
          console.error('No valid data returned from script execution');
        }
      }
    );
  }
});

function fetchDataFromNote() {
  const targetStrings = ["クロサキナオ", "lion", "みかん", "MitakaDai"]; // 複数の文字列を配列に設定
  const figures = document.querySelectorAll('#__layout > div > div:nth-child(1) > div:nth-child(3) > div > div.t-timeline-new__body > div.p-4.sm\\:px-6.sm\\:pt-1.sm\\:pb-6 > div.sm\\:hidden > figure');

  const data = Array.from(figures)
    .map(figure => {
      const spanElement = figure.querySelector('div.o-horizontalTimeLineNote__body > div.o-horizontalTimeLineNote__content.o-horizontalTimeLineNote__content--horizontal > div > div > div.o-horizontalTimeLineNote__user > a > span');
      const aElement = figure.querySelector('a');

      const spanText = spanElement ? spanElement.innerText : null;
      const aText = aElement ? aElement.href : null;

      return { spanText, aText };
    })
    .filter(item => (item.spanText !== null || item.aText !== null) &&
      (targetStrings.some(target => (item.spanText && item.spanText.includes(target))) || targetStrings.some(target => (item.aText && item.aText.includes(target)))));

  return data;
}

const targetStrings = ["クロサキナオ", "lion", "みかん", "MitakaDai"]; // 複数の文字列を配列に設定

chrome.tabs.create({ url: 'data.html' });

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Fetched Data</title>
  <script src="data.js"></script>
</head>
<body>
  <h1>推しメンタイムライン更新リスト</h1>
  <ul id="dataList"></ul>
</body>
</html>

document.addEventListener('DOMContentLoaded', () => {
    chrome.storage.local.get('fetchedData', (result) => {
      const dataList = document.getElementById('dataList');
      const fetchedData = result.fetchedData || [];
  
      fetchedData.forEach(item => {
        const listItem = document.createElement('li');
        listItem.textContent = `名前: ${item.spanText || 'N/A'}, URL: ${item.aText || 'N/A'}`;
        dataList.appendChild(listItem);
      });
    });
  });