LoginSignup
2

More than 1 year has passed since last update.

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

Last updated at Posted at 2018-03-25

概要

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;
}

そんな具合で

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

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

第2.5弾を投稿しました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2