Lang thang blog anh Thaimeo, đọc được bài của anh là mỗi newtab là một em gái xinh trên trình duyệt Chrome. Tại đây(http://thaimeo.info/2016/05/26/moi-tab-mot-em/)
Từ ý tưởng đó cũng muốn tự viết 1 add-on của Chrome cho mình với tính năng tương tự nhưng mà hình các em gái xinh là phải thuộc tập dữ liệu của mình. Và quan trọng hơn là nếu như của anh thì thấy load lâu vì phải lấy từ 1 host nào đó. Trộm nghĩ là lấy file trên chính máy mình đi cho nhanh. Tất nhiên thì như vậy thì các anh em khác sẽ không xem được danh sách ảnh của mình rồi. 😀
Mình không thể vào tải được code của anh nên đành lên mạng search vậy, sau một hồi search và chỉnh sửa thì cũng làm được ngon lành. Mọi người làm theo các bước sau đảm bảo sẽ được. Ý tưởng chính của add-on này đó là add-on sẽ can thiệp vào tính năng newtab của Chrome load 1 file HTML tĩnh trên máy tính. Trong trang tĩnh này ta có thể load ảnh từ internet hoặc trên máy tính của mình mà thôi.
Sau đây là giải thích code mình đã làm được như sau:
B1: Để viết một add-on cho Chrome cũng không mấy khó khăn, tính mình ăn xổi nên thường đi lấy code người khác về cho chạy đã, sau đó sửa sau. Add-on Chrome thì ít nhất là một file json để cấu hình. Tên file phải như sau: manifest.json
Nội dung trong file này:
{
“manifest_version”: 2,
“name”: “Newtab photo girl”,
“description”: “Newtab photo girl”,
“version”: “1.0”,
“permissions” : [“management”,”file:///*”],
“content_security_policy”: “script-src ‘self’ ‘sha256-eHFJrnOwJx0bWzcHL0wM89N/lRnr+wl8nTG7C6P7umU='”,
“chrome_url_overrides” : {
“newtab”: “newtab.html”
}
}
Mình chỉ giải thích 1 số tham số quan trọng sau:
Phần permissions bạn cần chọn management để có thể quản lý nó, file:///* cái này có tác dụng là add-on có quyền truy cập vào thư mục trên máy tính của mình.
Phần content_security_policy bạn cần cho phép add-on được thực thi javascript của các file. Cần lưu ý rằng mã sha256-eHFJrnOwJx0bWzcHL0wM89N/lRnr+wl8nTG7C6P7umU= được định danh để add-on có quyền xử lý các javascript của add-on khi cài đặt. Với mỗi máy hoặc mỗi lần cài đặt thì mã này khác nhau. Nếu không nó sẽ báo lỗi và không thể dùng add-on được. Lấy được mã này bằng cách khi chạy add-on nó sẽ báo lỗi, mình cần F12 để view soure và lấy mã này cập nhật lại vào file manifest này và load lại add-on thôi.
Phần chrome_url_overrides đây là trang web mà mình sẽ sử dụng để làm trang mặc định khi newtab. Nội dung file này thuần HTML, tiến hành nhúng thêm chút css và javascript cho nó ngầu.
B2: File HTML tĩnh:
<html>
<head>
<style>
</style>
<script>
document.addEventListener(“DOMContentLoaded”, function() {
chrome.management.getAll(getAllCallback);
});
window.onload = choosePic;
var imlocation = “C:/xxx/xxx/xxx/xxx/xxx/xxx/xxx/”;
function choosePic() {
var randomNum = Math.floor(Math.random() * 1000);
document.getElementById(“abc”).src = imlocation+randomNum+”.jpg”;
}
</script>
</head>
<body>
<div id=”apps”>
<img id=”abc” src=”” alt=”Smiley face” style=”display: block; width:900 ;margin-left: auto; margin-right: auto;”>
</div>
</body>
</html>
Trong file này mình đơn giản chỉ thể hiện file ảnh có độ rộng 900 pixel và nằm ở giữa màn hình. File được random trong 1000 bức ảnh có tên là 1 số tự nhiên từ 1 đến 1000 và đuôi ảnh là jpg. Và nằm trong thư mục: C:/xxx/xxx/xxx/xxx/xxx/xxx/xxx/
B3: Chuẩn bị thư viện ảnh để load. Như B2, mình sẽ cần 1000 ảnh các em xinh tươi, bốc lửa để ngắm nhìn mỗi khi newtab.
B4: Tiến hành sử dụng Chrome ở chế độ Develop vào Cài đặt -> More tool -> Extensions -> Load unpacked chọn đến thư mục chứa 2 file trên mà thôi. Lần đầu tiên các bạn nhớ cho phép add-on đặt trang mặc định là trang newtab.html. Và lần đầu tiên kiểu gì cũng không xem được ngay, bạn cần sửa lại 1 chút ở bước 1 với mã bảo mật được sinh tự động ra nhé.
B5: Đến đây ta có thể dùng ngon rồi, các bạn có thể tùy biến để theo ý thích riêng của mình nhé. Như load random trong 1 thư mục với nhiều tên và định dạng ảnh khác nhau không như tất cả ảnh cùng định dạng như mình.
P/S: Một số ý tưởng mới có thể áp dụng cho add-on tương tự nhưng không phải ảnh gái nhàm chán như trên:
– Random các câu tiếng anh mình cần phải học
– Random 1 trong các từ vựng để học từ vựng 1 cách thụ động
– Random 1 trang web bất kỳ trên internet để mở rộng hiểu biết về thế giới web.