JavaScript >> Javascript 文檔 >  >> Tags >> CSS

製作您的第一個 Google Chrome 擴展程序

Google Chrome 網絡瀏覽器正在慢慢普及。這並不奇怪,因為它是一個很棒的瀏覽器,並且得到了谷歌的支持。它還為 Web 開發人員提供了很好的工具,我發現自己越來越多地使用它(實際上 Firebug 是唯一讓我無法穿越到另一邊的東西)。

隨著擴展程序的引入,Google Chrome 變得更加靈活和強大。

在本教程中,我們將創建一個簡單的擴展程序,它會在 Chrome 的地址欄旁邊放置一個小圖標,點擊後將獲取 Tutorialzine 的 RSS 提要並顯示我們最新教程的精美預覽。

先說幾句關於擴展的內容。

擴展的工作原理

Google Chrome 中的擴展程序基本上是網頁。你有 javascript 文件、樣式表和圖像。您甚至可以使用 jQuery 等 JavaScript 庫。

但是,擴展程序的處理方式與瀏覽器中顯示的常規網頁略有不同。您可以訪問所有打開的選項卡、用戶的瀏覽歷史記錄、操作所有打開的頁面、向任何網站發送 AJAX 請求等等。

您的擴展程序僅在一個瀏覽器上運行的好處(或限制)。您可以忘記所有的兼容性問題,擁抱 Google Chrome 的熱門新 HTML5 功能。

開發擴展

擴展包在 .crx 中 文件(命名為 zip 文件),但在開發過程中,您可以將工作文件夾映射為擴展。這樣您就可以快速更改和部署代碼,而無需重新打包。

這是通過打開擴展頁面來完成的(輸入 chrome://extensions/ 在地址欄中,或單擊 扳手圖標> 擴展程序 ),然後點擊開發者模式>加載解壓的擴展.. 在頁面上。對擴展進行更改後,只需點擊其下方的重新加載鏈接即可。

完成開發後,點擊Pack extension.. 將為您創建一個 crx 文件。您可以從您的網站提供此文件,並允許您網站的訪問者安裝它。

谷歌瀏覽器是迄今為止最容易為其擴展的瀏覽器,您將從以下步驟中看到。

關於調試的說明 :要調試您的擴展程序,請右鍵單擊地址欄旁邊的擴展程序圖標,然後選擇檢查彈出窗口 .你也可以看看這個教程。

第 1 步 - Manifest.json

創建擴展的第一步是將硬盤上的文件夾映射為擴展(如上所述)。你要把你所有的文件都放在這個文件夾裡。

Chrome 擴展程序唯一需要的是 manifest.json 文件。這是一個文本文件,它以 json 對象的形式保存配置設置。

這是我們要使用的:

manifest.json

{
    "name": "Tutorialzine Extension",
    "version": "1.0",
    "description": "Making your first Google Chrome extension.",
    "browser_action":   {
        "default_icon": "icon.png",
        "popup": "tutorialzine.html"
    },

    "icons":{
        "128":"icon_128.png"
    }
}

在這個文件中,我們指定了擴展名和一些其他選項,例如瀏覽器操作和權限。

browser_actions ,我們放置與瀏覽器窗口相關的設置。 彈出窗口 屬性告訴 Chrome,我們將顯示 tutorialzine.html 作為彈出窗口。您可以在 browser_actions 中進行許多設置。您可以在 Google Chrome 的擴展文檔中閱讀更多內容。

對於這個擴展,我們不需要訪問當前打開的頁面,也不需要操作選項卡和窗口。但是,如果我們需要這些,我們需要包含一個權限屬性,以及頁面的地址。

有關清單文件的更多信息,請參閱 Google Chrome 的文檔。

第 2 步 - HTML 5

如上所述,我們告訴 Chrome tutorialzine.html 將作為彈出窗口打開。這是一個常規的 html 文件,包含樣式表和 js 文件。

由於 Google Chrome 對 HTML5 有很好的支持,我們可以在其中編寫 tutorialzine.html 代碼。但是,您可以使用通常用於編寫網站代碼的任何 HTML 版本。

tutorialzine.html

<!DOCTYPE html> <!-- The new doctype -->
<html>
<head> <!-- No title and meta tags are necessary for the extension -->

<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.min.js"></script> <!-- Including jQuery -->
<script src="script.js"></script> <!-- Our script file -->

</head>

<body>

<h1>Latest Tutorials on Tutorialzine</h1>

<div id="content">
<!-- The latest tutorials are going to be inserted here -->
</div>

</body>
</html>

如您所見,我們直接處理 css 和 js 文件。 Chrome 將為我們包括它們。就像我們在處理普通網頁一樣。

第 3 步 - CSS3

由於該擴展是由 Google Chrome 呈現的,因此在涉及 CSS3 支持時,我們不需要用最小的公分母來限制自己。這就是為什麼我們可以使用像 -webkit-box-reflection 這樣的奇特規則 和 -webkit-gradient .

styles.css - 第 1 部分

*{
    margin:0;
    padding:0;
}

body{
    /* Setting default text color, background and a font stack */
    font-size:12px;
    color:#666;

    /* A webkit gradient: */
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#DDD));

    text-shadow:1px 1px 0 white;
    font-family:Arial, Helvetica, sans-serif;
    overflow-x:hidden;
}

.tutorial{
    width:500px;
    padding:10px 20px;
    margin-bottom:10px;
}

img{
    width:100px;
    height:100px;
    float:left;

    /* Webkit CSS3 Reflection */
    -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.75, transparent), to(rgba(255, 255, 255, 0.3))) 0 0 0 0 stretch stretch;
}

-webkit-box-reflect 在縮略圖下創建一個純 CSS 反射。生成反射需要許多參數 - 反射的位置、與圖像底部的偏移量以及遮罩(使用漸變定義)。

styles.css - 第 2 部分

p,a{
    padding:10px 0 0 120px;
    display:block;
}

a,a:visited{
    color:#09F;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

h1{
    /* Webkit gradient: */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#DDD));

    border-bottom: 1px solid #F0F0F0;
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 30px;
    padding: 30px 0px;
    text-align: center;
    text-shadow: white 0px 1px 1px;
}

h2{
    font-size:24px;
    font-weight:normal;
    right:40px;
    padding-left:120px;
}

h1,h2{
    font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}

在代碼的第二部分中,我們也使用了漸變,但這次是作為 h1 元素的背景。

第 4 步 - jQuery

JavaScript 的執行就像它是常規網頁的一部分一樣。這意味著我們可以包含 jQuery 庫並定義一個 $(document).ready() 就像我們通常在 Web 項目中所做的那樣。

單擊擴展圖標對頁面上的腳本具有相同的效果,就像在瀏覽器中打開頁面一樣。

在 $(document).ready() 中,我們藉助 Yahoo 的 YQL API 從 Tutorialzine 的 RSS 提要中獲取最新結果 .我們之前使用過這個 API 幾次,這裡是 Tz。它允許我們使用類似 SQL 的語法來獲取 JSON 格式的數據。

獲取數據後,我們生成 HTML 標記並將其包含在 tutorialzine.html 中 .我們還將它保存到 localStorage 作為一個簡單的緩存解決方案。 localStorage 是一種保存持久數據的簡單方法(它在頁面加載之間仍然存在)。這使得使用擴展程序的體驗快了很多。

script.js

$(document).ready(function(){

    var query = "SELECT * FROM feed WHERE url='http://feeds.feedburner.com/Tutorialzine' LIMIT 2";

    // Storing the seconds since the epoch in now:
    var now = (new Date()).getTime()/1000;

    // If there is no cache set in localStorage, or the cache is older than 1 hour:
    if(!localStorage.cache || now - parseInt(localStorage.time) > 1*60*60)
    {
        $.get("http://query.yahooapis.com/v1/public/yql?q="+encodeURIComponent(query)+"&format=json&callback=?",function(msg){

            // msg.query.results.item is an array:
            var items = msg.query.results.item;
            var htmlString = "";

            for(var i=0;i<items.length;i++)
            {
                var tut = items[i];

                // Extracting the post ID from the permalink:
                var id = tut.guid.content.match(/(\d+)$/)[0];

                // Looping and generating the markup of the tutorials:

                htmlString += '<div class="tutorial">\
                                <img src="https://tutorialzine.com/img/posts/'+id+'.jpg" />\
                                <h2>'+tut.title+'</h2>\
                                <p>'+tut.description+'</p>\
                                <a href="'+tut.link+'" target="_blank">Read more</a>\
                                </div>';
            }

            // Setting the cache
            localStorage.cache  = htmlString;
            localStorage.time   = now;

            // Updating the content div:
            $('#content').html(htmlString);
        },'json');
    }
    else{
        // The cache is fresh, use it:
        $('#content').html(localStorage.cache);
    }
});

在 localStorage 中,我們還存儲一個時間戳。我們使用它來確定 localStorage 中緩存的年齡。如果超過一個小時,我們將忽略它並重新獲取數據。

這是從 YQL 返回的數據示例。

{
    "query": {
        "count": "1",
        "created": "2010-06-09T12:02:33Z",
        "lang": "en-US",
        "results": {

            "item": {
                "title": "Neon Text Effect With jQuery & CSS",
                "link": "http://feedproxy.google.com/..",

                "comments": [
                    "https://tutorialzine.com/2010/06/neon-text-effect..",
                    "11"
                ],

                "pubDate": "Tue, 01 Jun 2010 20:11:54 +0000",
                "creator": "Martin Angelov",

                "category": [
                    "CSS",
                    "jQuery"
                ],

                "guid": {
                    "isPermaLink": "false",
                    "content": "https://tutorialzine.com/?p=925"
                },

                "description": "In this combined design and coding tutorial..",
                "commentRss": "https://tutorialzine.com/2010/06/neon-text-e..",
                "origLink": "https://tutorialzine.com/2010/06/neon-text-eff.."

            }
        }
    }
}

這個結構在 msg 中提供給我們 script.js 第 11 行的變量。

有了這個你的第一個谷歌瀏覽器擴展就完成了!

結論

您可以在 Google Chrome 的擴展文檔頁面上閱讀更多關於擴展(包括本教程未涉及的高級功能)的信息。我希望本教程為您擴展瀏覽器功能提供了一個良好的開端。

你怎麼看?您會為您的網站製作 Chrome 擴展程序嗎?


Tutorial JavaScript 教程
  1. 在 Angular 14 中添加 Stripe Card Checkout 支付網關

  2. 工具和測試體驗的設計

  3. Vue 3 中處理模態對話框的最簡單方法

  4. 使用 Netlify 函數和 React 訪問您的數據

  5. 學習焊接如何教會了我 Gatsby.js 和 AWS

  6. React Hooks 簡介

  7. 今天使用 ES6 模塊

  1. .append()、prepend()、.after() 和 .before()

  2. 理解語法

  3. TypeScript中聲明類和接口有什麼區別

  4. Chrome 上 window.postMessage 的問題

  5. 如何在 Firebase 上部署 React 應用

  6. 為 ESLint 編寫本地規則

  7. Twilio 黑客馬拉松項目 - Quarantini 俱樂部

  1. 二叉樹——2022年如何使用Javascript實現?

  2. 我終於發布了我工作了一個多月的應用程序!它被稱為 Twester。

  3. 我試圖用 30 個字用 Javascript 解釋一切。

  4. 在您的 Vue 應用程序中嵌入 dev.to 文章