【GoogleChrome】新しいタブにニュース記事一覧を表示する拡張機能を作った

概要

GoogleChromeの拡張機能を作る企画第2弾です。第1弾はこちら。
新しいタブにニュース記事一覧を表示する拡張機能を作りました。

準備 ニュース記事取得API

以下のページでAPIキーを取得を取得してアクセスできるようにする。

Google News API
https://newsapi.org/s/google-news-api

[Get API key to start searching GoogleNews]をクリックして
必要事項を入力して[Submit]すれば発行できる。

コード

Githubに上げてます。
https://github.com/mkt120/newTabExtention/tree/main/googleNews

リクエスト

以下をページを参考にリクエスト＋レスポンス取得処理を実装。

ピュアなJSでAPIリクエストをするメモ（jsonとjsonp）
https://qiita.com/ikuwow/items/ed5f3c9ee0bd6147b7f3#json%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88

一番ハードル高い箇所と思っていましたが、すっごく簡単に解決できました。
ありがたやーです。

googleNews.js

const URL_NEWS_API = "URLを張り付ける";

// 中略

requestAjax(URL_NEWS_API, function(response){    
    for (var i in response.articles) {
      var div = createNewsItem(document, response.articles[i]);
      document.body.appendChild(div);
    }
});

コンテンツ表示

情報取得ができれば、あとはレスポンスに合わせてコンテンツを生成するだけ。

googleNews.js

function createNewsItem(document,article) {
  var div = document.createElement("div");

  // 中略

  // サムネイル
  var img = document.createElement("img");
  img.setAttribute('class', CLASS_NEWS_IMG);
  img.src = article.urlToImage;
  div.appendChild(img);

  // テキスト
  var a = document.createElement("a");
  a.innerHTML = article.title;
  a.href = article.url;
  div.appendChild(a);
  
  return div;
}

そんな具合で

できたものがこちら。まだまだ改善の余地はあるけど、まずは実現したいことが実装できた。

#最後に
Android Javaしか書けない私なので、HTMLとかCSSとかJavascriptの勉強も兼ねてですが、
将来的にはiGoogleの機能を独自実装できるようになることを目指しています。

第2.5弾を投稿しました。