色啪啪97一区二区三区,japanese在线看,亚洲欧美偷自乱图片

知識點：

browser_action

首先新建一個名為 my_clock 的文件夾，在此文件夾中新建一個名為 manifest.json 的文件，內容如下：

{
    "manifest_version": 2,
    // 擴展的名稱
    "name": "我的時鐘",
    // 擴展的版本
    "version": "1.0",
    // 擴展的描述
    "description": "我的第一個Chrome擴展",
    // 擴展相關圖標文件的路徑
    "icons": {
        "16": "images/icon.png",
        "48": "images/icon.png",
        "128": "images/icon.png"
    },

    // 指定擴展的圖標放在Chrome的工具欄中
    "browser_action": {
        // 定義了相應圖標文件的路徑
        "default_icon": {
            "19": "images/icon.png",
            "38": "images/icon.png"
        },
        // 定義了當用戶鼠標懸停于擴展圖標上所顯示的文字
        "default_title": "我的時鐘",
        // 定義了當用戶單擊擴展圖標時所顯示的html文件路徑
        "default_popup": "popup.html"
    }
}

接下來我們開始編寫 popup.html：

<html>

<head>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        width: 250px;
        height: 300px;
    }

    div {
        line-height: 100px;
        font-size: 42px;
        text-align: center;
    }
    </style>
</head>

<body>
    <div id="clock_div"></div>
    <script src="js/my_clock.js"></script>
</body>

</html>

如果你曾經編寫過網頁，會發現上面這個頁面省略了很多內容，比如 <title> 標簽。因為對于 Chrome 擴展來說，很多對網頁有意義的內容是無意義的，所以我們可以只挑需要的寫，當然你全寫出來也不會有什么問題。

上面的這個頁面首先定義了全局元素的 margin 和 padding 為 0，這樣我們可以更加自由地控制元素的外觀。

在編寫網頁時，body 的尺寸往往不會專門給定，但對于 Chrome 擴展有時這是必要的，比如此例中我們需要告訴 Chrome 當用戶單擊擴展圖標后展示一個多大的界面。

之后我們在 body 標簽中定義了一個 id 為 clock_div 的 div 容器，用這個容器來顯示當前的時間，這樣我們就把 HTML 的布局寫好了。

接下來我們就需要引入 JavaScript 處理數據并動態顯示了。值得注意的是 Chrome 不允許將 JavaScript 代碼段直接內嵌入 HTML 文檔，所以我們需要通過外部引入的方式引用 JS 文件。

當然 inline-script 也是被禁止的，所以所有元素的事件都需要使用 JavaScript 代碼進行綁定，如果你沒有使用一個擁有強大選擇器的庫（如 jQuery），最好給需要綁定事件的元素分配一個 id 以便進行操作。

下面來編寫 my_clock.js 文件：

function my_clock(el){
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    m=m>=10?m:('0'+m);
    s=s>=10?s:('0'+s);
    el.innerHTML = h+":"+m+":"+s;
    setTimeout(function(){my_clock(el)}, 1000);
}

var clock_div = document.getElementById('clock_div');
my_clock(clock_div);

在 my_clock.js 文件中我們定義了一個 my_clock() 函數用于顯示時間，這個函數包含了一個 el 參數，這個參數為顯示時間的容器。

由于在 HTML 文檔中我們設計在 id 為 clock_div 的 div 容器中顯示時間，所以調用 my_clock() 函數時我們傳入了這個容器，在 js 文件中用變量 clock_div 表示。之后 my_clock 函數 1000 毫秒之后又會再次調用自身，這樣 clock_div 中顯示的時間就會被更新。

至此這個擴展就編寫完畢了，當然別忘了將圖標文件也放入相應的文件夾中。