0765562555

Hướng dẫn tự động tạo nên Extension Chrome bởi vì thế Scratch 2021-03-27 08:54:41


Cuối nằm vào, tệp “form_style_5.css” sẽn mang nội dung như bên dưới. Code này chỉ dễ dàng là lấy hào hứng design kể từ trang gốc nhằm dùng tới extension.

.khuông-style-5
 max-width: 500px;
 padding: 10px 20px;
 background: #f4f7f8;
 margin: 10px như máy;
 padding: 20px;
 background: #f4f7f8;
 border-radius: 8px;
 phông-family: Georgia, “Times New Roman”, Times, serif;

.khuông-style-5 fieldset
 border: none;

.khuông-style-5 legend
 phông-size: một.4em;
 margin-bottom: 10px;

.khuông-style-5 label
 display: block;
 margin-bottom: 8px;

.khuông-style-5 input[type=”text”],
.khuông-style-5 input[type=”date”],
.khuông-style-5 input[type=”datetime”],
.khuông-style-5 input[type=”email”],
.khuông-style-5 input[type=”number”],
.khuông-style-5 input[type=”search”],
.khuông-style-5 input[type=”time”],
.khuông-style-5 input[type=”url”],
.khuông-style-5 textarea,
.khuông-style-5 select
 phông-family: Georgia, “Times New Roman”, Times, serif;
 background: rgba(255,255,255,.một);
 border: none;
 border-radius: 4px;
 phông-size: 16px;
 margin: 0;
 outline: 0;
 padding: 7px;
 width: 100%;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 background-color: #e8eeef;
 color:#8a97a0;
 -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
 box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
 margin-bottom: 30px;

.khuông-style-5 input[type=”text”]:focus,
.khuông-style-5 input[type=”date”]:focus,
.khuông-style-5 input[type=”datetime”]:focus,
.khuông-style-5 input[type=”email”]:focus,
.khuông-style-5 input[type=”number”]:focus,
.khuông-style-5 input[type=”search”]:focus,
.khuông-style-5 input[type=”time”]:focus,
.khuông-style-5 input[type=”url”]:focus,
.khuông-style-5 textarea:focus,
.khuông-style-5 select:focus
 background: #d2d9dd;

.khuông-style-5 select
 -webkit-appearance: menulist-button;
 height:35px;

.khuông-style-5 .number
 background: #1abc9c;
 color: #fff;
 height: 30px;
 width: 30px;
 display: inline-block;
 phông-size: 0.8em;
 margin-right: 4px;
 line-height: 30px;
 text-align: center;
 text-shadow: 0 1px 0 rgba(255,255,255,0.2);
 border-radius: 15px 15px 15px 0px;

.khuông-style-5 input[type=”submit”],
.khuông-style-5 input[type=”button”]

 position: relative;
 display: block;
 padding: 19px 39px 18px 39px;
 color: #FFF;
 margin: 0 như máy;
 background: #1abc9c;
 phông-size: 18px;
 text-align: center;
 phông-style: normal;
 width: 100%;
 border: 1px solid #16a085;
 border-width: 1px 1px 3px;
 margin-bottom: 10px;

.khuông-style-5 input[type=”submit”]:hover,
.khuông-style-5 input[type=”button”]:hover

 background: #109177;

Sau Khi trả thiện xong loại mẫu của extension, công tác tiếp sau của loại người viết lách logic tới extension. Extension nối tiếp thực hiện ni 2 công tác sau: thêm việc mong muốn thực tiễn hiện và hiển thị bọn nó. Vì vậy, loại người mong muốn thiết code chức năng thêm việc và hiển thị bọn nó bên trên extension.
Trong đoạn code ngay sau này, bản thân nối tiếp dùng nhì hàm là sync.get() và sync.mix(), là nhiều hàm của “chrome.storage”. Hàm sync.mix() lưu nhiều việc mong muốn thực tiễn hiện vào cỗ ghi nhớ lưu giữ và sync.get() bản chất nhằm thực hiện truy suất và hiển thị những việc mong muốn thực tiễn hiện. Mình lấy commnet vào cụ thể từng chức năng của code tới những nhiều bạn đọc tiện theo dõi nhé.

function loadItems()  /* First get() the data from the storage */ chrome.storage.sync.get([‘todo’], function(result)   var todo = []
  if (result && result.todo && result.todo.trim() !== ”)    /* Parse and get the array as it is saved as a string */   todo = JSON.parse(result.todo)  
  console.log(‘todo.length=” + todo.length)
  for (var i = 0; i < todo.length; i++)    item = todo[i]
   if (item && item.trim() !== “‘)     /* Append the items in the #list for showing them */    var list = document.getElementById(‘list’)    var entry = document.createElement(‘li’)    var text = document.createTextNode(item)

    entry.appendChild(text)    list.appendChild(entry)      )
/* Load the to-do items upon popup load */document.addEventListener(‘DOMContentLoaded’, function() console.log(‘Inside doc.loaded()’)
 loadItems())
/* Save the to-do item upon button nhấp chuột */document.getElementById(‘btn’).addEventListener(‘nhấp chuột’, function (ev) { console.log(‘Inside btn.nhấp chuột()’)
 text = document.getElementById(‘txt’).value
 if (text && text.trim() !== ”)

  /* First get() old data as calling mix() will replace it */  chrome.storage.sync.get([‘todo’], function(result)    var todo = []
   if (result && result.todo && result.todo.trim() !== ”)     /* Parse and get the array as it is saved as a string */    todo = JSON.parse(result.todo)   
   todo.push(text)
   chrome.storage.sync.mix(‘todo’: JSON.stringify(todo), function()     /* Data is saved now */

    var list = document.getElementById(‘list’)
    while (list.firstChild)      list.removeChild(list.firstChild)    
    loadItems()   )  ) })
Cách 3: Demo extension
Sau Khi nhiều bạn đọc viết lách xong tiện lợi không ngừng cải tiến và tiến lên thêm của chính bản thân, nhiều bạn đọc cần giới thiệu coi extension sẽ phạt động và sinh hoạt giải trí đúng Hay là ko bởi vì thế cách thức thêm extension vào Chrome. Trước tiên, nhiều bạn đọc cần nhảy chính sách developer mode vào Chrome: nhấp vào nút Options > More tools > Extensions, tiếp tiếp sau nhảy “Developer mode”.

Tiếp theo nhấp vào nút “Load unpacked”. Nếu nhiều bạn đọc sửa code, Chrome nối tiếp tự động hoạt động load lại extension tới những bạn đọc, một chức năng “hot reload” cực kì hữu dụng.

Giờ phía trên, nhiều bạn đọc cũng trọn vẹn tuy rằng thế cho dù dùng tiện lợi do bản thân tự động viết lách ra nhằm ghi lại nhiều việc mong muốn thực tiễn hiện bên trên Chrome rồi kia.

Đăng Extension lên Chrome Store
Mặc Mặc dù cải tiến và tiến lên tiện lợi không ngừng cải tiến và tiến lên thêm lên Chrome Web Store trực tuyến khá dễ dàng, tuy rằng thế quy trình này lại khá phức tạp. Nói vậy là, nhiều bạn đọc cần tạo nên thông tin trương mục ngôi nhà cải tiến và tiến lên, gói gọn tiện lợi không ngừng cải tiến và tiến lên thêm của chính bản thân và tiếp tiếp sau gửi nó nằm vào theo cùng với rất nhiều bộ phận khác của extension (như thương hiệu, loại mẫu, hình ảnh chụp monitor,…); như được liệt kê vào Post bài chưng vứt luận này.
Kết luận
Như sẽ nói sinh sống đầu Post bài chưng vứt luận, phía trên ko cần là vào số những những Post bài chưng vứt luận còn nữa chỉ dẫn nhiều bạn đọc thực hiện extension. Vậy nên, nếu như nhiều bạn đọc lấy nhu yếu ớt mong muốn theo phía extension thì ngay sau này là vào số những những số Power khá hoặc tuy rằng thế nhiều bạn đọc cũng trọn vẹn tuy rằng thế cho dù mò hiểu:
Tất cả nhiều abilities, components, và chức năng của extensions.
Các extension mẫu của tập thể group cải tiến và tiến lên Google Chrome.
quý quan lại quý khách khứa hàng cũng trọn vẹn tuy rằng thế cho dù cải tiến và tiến lên thêm nhiều chức năng của extension vừa thực hiện như:
Thêm tùy lựa lựa xóa nhiều việc mong muốn thực tiễn hiện.
Tính năng thông tin nhiều việc mong muốn thực tiễn hiện.
Vậy nên, nếu như nhiều bạn đọc trang trọng bên trên con chiếc phố này thì bản thân chúc nhiều bạn đọc lộc may nhé.

Nguồn Hướng dẫn tự động tạo nên Extension Chrome bởi vì thế Scratch

2021-03-27 08:54:41 #Hướng #dẫn #tự động #tạo nên #Extension #Chrome #bởi vì thế #Scratch