只需 5 个步骤即可创建并发布您的第一个 Chrome 扩展程序。

什么是 Chrome 扩展程序？

扩展程序是用于定制浏览体验的小型软件程序。它们使用户能够根据个人需求或偏好定制 Chrome 的功能和行为。它们基于 HTML、JavaScript 和 CSS 等网络技术构建。—— Chrome 开发者

入门

在直接深入开发部分之前，首先退一步思考一下，你想要创造什么？

今天，我们正在创建一个扩展程序，每当用户切换到新标签时，它就会显示新的引文。

步骤 1：告诉 Chrome 你的扩展程序

我们必须创建一个 JSON 格式的清单文件，其中包含扩展的详细信息，如扩展的名称、描述等。

对于此扩展，我们需要像activeTab 这样的权限。

打开一个名为manifest.json的文件

{    
  "manifest_version": 2,

  "name": "QuoteThat",    
  "description": "An Extension which show quotes whenever user switch to new tab. It will work offline and change quote in every 60 seconds.",    
  "version": "1.0.0",    
  "chrome_url_overrides" : {  
    "newtab": "newtab.html"    
  },  
  "browser_action":{      
    "default_icon": "icon.png"    
  },  
  "permissions": ["activeTab"]  
}

正如您在“ newtab ”中看到的，我们希望每当用户切换到新选项卡时都会呈现_newtab.html。

步骤2：制作HTML文件

打开newtab.html

<!DOCTYPE html>  
<html>  
<head>  
  <title>New Tab</title>  
</head>  
<body>  
  <blockquote>  
    <center>  
      <p id="quote"></p>  
      <footer>   
        <cite id="author"></cite>  
      </footer>  
    </center>  
  </blockquote>  
</body>  
</html>

添加一些CSS以使您的页面更美观。

<style>  
    body   
    {  
      background-image: url("back.jpg");   
      -webkit-background-size: cover;  
      -moz-background-size: cover;  
      -o-background-size: cover;  
      background-size: cover;  
      position: absolute;  
      width: 70%;  
      top: 25%;  
      left: 0;  
      right: 0;  
      margin: auto;  
    }  
    p   
    {  
     font-size:35px;  
     color: white;  
    }  
    cite   
    {  
      font-size:25px;  
      color: yellow;  
    }  
</style>

因此，你的newtab.html将如下所示

<!DOCTYPE html>  
<html>  
<head>  
  <title>New Tab</title>  
  <style>  
    body   
    {  
      background-image: url("back.jpg");   
      -webkit-background-size: cover;  
      -moz-background-size: cover;  
      -o-background-size: cover;  
      background-size: cover;  
      position: absolute;  
      width: 70%;  
      top: 25%;  
      left: 0;  
      right: 0;  
      margin: auto;  
    }  
    p   
    {  
     font-size:35px;  
     color: white;  
    }  
    cite   
    {  
      font-size:25px;  
      color: yellow;  
    }  
  </style>  
</head>  
<body>  
  <blockquote>  
    <center>  
      <p id="quote"></p>  
      <footer>   
        <cite id="author"></cite>  
      </footer>  
    </center>  
  </blockquote>  
  <script src="jquery.min.js"></script>  
  <script src="javascript.js"></script>  
</body>  
</html>

现在，正如您所看到的，我们添加了一个 Javascript 文件，但在此之前，让我们看一个包含将在新选项卡中显示的引号的 JSON 文件。

quotes.json

[  
 [  
  "William James",  
  " Act as if what you do makes a difference. It does."  
 ],  
 [  
  "Bill Cosby",  
  " Decide that you want it more than you are afraid of it."  
 ],  
 [  
  "Judy Collins",  
  " I think people who are creative are the luckiest people on earth. I know that there are no shortcuts, but you must keep your faith in something Greater than You, and keep doing what you love. Do what you love, and you will find the way to get it out to the world."  
 ],  
 [  
  "Jessica Savitch",  
  " No matter how many goals you have achieved, you must set your sights on a higher one."  
 ],

可以看到，json 文件中有作者和引言。因此，我们将显示引言及其作者。

现在，让我们编写javascript.js

function Quote(callback)   
{  
  $.getJSON('quotes.json',function(data)   
  {  
    var rN=Math.round(Math.random()*(data.length-1));  
    var author=data[rN][0];  
    var quote=data[rN][1];  
    callback(quote,author);  
  });  
};  
function changeQuote()   
{  
  callback=function(quote, author)   
  {  
    $("p#quote,cite#author").fadeOut(function()   
    {  
      $("p#quote").text(quote).fadeIn(function()   
      {  
        $("cite#author").text(author).fadeIn();  
      });  
    });  
  };  
  Quote(callback);  
};  
$(window).load(function()   
{  
  changeQuote();  
  setInterval(changeQuote,60000);  
});