在 5分钟内,如何生成 Chrome 扩展 | 出色的新标签替代?

分享于 

6分钟阅读

Web开发

  繁體

介绍

在进行 Chrome 扩展之前,我们必须有一个基本的想法,它是一个插件或者 add-on 来增强浏览器的功能。

在这篇文章中,我们将在每次单击新标签时显示一个 Chrome 扩展,并显示一天的报价。 这个扩展将在 Google Chrome 中以及其他基于 Chromium的浏览器中工作。

背景

前提条件

你需要了解以下基础知识:

  • HTML
  • CSS
  • Javascript

如果你已经熟悉 上面 技术,那么你就已经知道了各自的技术是什么。 我们将使用 HTML。CSS和JavaScript制作一个简单的网站,并将它的托管为。 我们可以借助JavaScript来添加业务逻辑。 Chrome,有一些最佳实践或者格式需要我们关注。

使用代码

让我们开始吧。构建扩展非常简单,只需按照以下步骤操作。

步骤 1

打开 Google Chrome &转到 chrome://extensions/ 并启用开发者模式。

How to make a chrome extension in javascript developer mode

步骤 2

转到 extensionizr.com 并在每个选项中选择( 了解更多关于如何通过悬停在'?

  • 隐藏扩展
  • 无背景
  • 无花哨选项
  • 替代新标签
  • 添加 jQuery

How to make a chrome extension in javascript hidden extension

完成这些操作后,下载zip文件。

步骤 3

解压压缩文件后,转到主文件夹中的manifest.json 文件并编辑 manifest.json。 Manifest.json 包含 Chrome 扩展需要的所有元数据,它是扩展的入口点。 除了 nameversiondescription,等等,你可能没有权限属性,这只是一个JavaScript对象。 只要从这里复制粘贴,以后就需要它。

{"name": "Beautiful New Tab","version": "0.0.1","manifest_version": 2,"description": "Get beautiful images with quotes whenever you open a new tab.","homepage_url": "http://codesparta.com","icons": {"16": "icons/icon16.png","48": "icons/icon48.png","128": "icons/icon128.png"},"default_locale": "en","chrome_url_overrides": {"newtab": "src/override/override.html"},"permissions": [ "https://source.unsplash.com/","http://quotes.rest/"]
}

步骤 4

在CSS和js文件夹中创建一个文件和一个文件 in。js文件。

步骤 5

制作基本的HTML文档。 转到 src/override/ 你会找到 override.html 文件。

将 。js文件和。css文件同时添加到 override.html。

<!DOCTYPEhtml><html><head><title>Make a Chrome Extension | Beautiful New Tab</title><linkhref="../../css/custom.css"rel="stylesheet"/></head><body><h1>Quote of the day</h1><divclass="quote"><h1id="quoteblock"></h1><h3id="author"></h3></div><scriptsrc="../../js/jquery/jquery-1.12.3.min.js"></script><scriptsrc="../../js/jquery/app.js"></script></body></html>

步骤 6

我们将使用两个网站- 它的中一个将为我们提供一些优秀的图像,第二个将为我们提供日常报价。

我们要向外部链接发出请求,必须在 manifest.json 中添加权限。

在 custom.css 中添加以下 CSS ( 我们已经使用了 PT Google字体)。

@import url(https://fonts.googleapis.com/css?family=PT+Serif:400italic);body {background-image:url("https://source.unsplash.com/category/nature/1600x900");background-repeat:no-repeat;height:100%;width:auto;}h1{font-family: 'PT Serif', serif;font-size:2.5em;text-align:center;color:#fff;text-shadow:2px 2px 3px rgba(150,150,150,0.75);}
.quote{color:#ffffff;text-align:center;vertical-align:middle;padding:19% 15% 0 15%;}
#quoteblock{font-family: 'PT Serif', serif;text-shadow:2px 2px 3px rgba(150,150,150,0.75);font-size:2em;}
#author{font-family: 'PT Serif', serif;text-align:center;color:#fff;text-shadow:2px 2px 3px rgba(150,150,150,0.75);}

步骤 7

从 theysaidso API获取引用。

我们必须要求从 API ( http://quotes.rest/qod.json ) 获取JSON数据,并获取从我们使用AJAX进行的引用。

How to make a chrome extension in javascript use json data

将下面的代码添加到你所做的JavaScript文件中:

$(function(){var url = "http://quotes.rest/qod.json";var quote = $("#quoteblock");// the id of the heading$.get(url, function (data) {var the_quote = data;
quote.text(the_quote.contents.quotes[0].quote);var author = $("#author");// id of authorauthor.text(the_quote.contents.quotes[0].author);
});
});

步骤 8

创建 Chrome 扩展( .crx ) 文件。 加载你的文件夹先测试,然后去打包扩展,将成为你可以与朋友分享的 。crx文件。 只需拖放的文件,就可以在上找到 file。 它将安装扩展。

How to make a chrome extension in javascript make. crx file

How to make a chrome extension in javascript 5

最终结果

每次单击新建标签时,都会显示一个带有引号的新图像,每天使用 background 数据的JSON属性。

How to make a chrome extension in javascript new tab override

How to make a Chrome Extension with JavaScript step by step guide


ext  MAKE  tab  CHR  chrome  awe  
相关文章