Làm cách nào để đưa javascript vào tiện ích mở rộng của chrome?

Sự trì hoãn. "document_start" không phải là vấn đề, bạn muốn "document_start" nếu bạn muốn ở đó trước khi bất kỳ điều gì khác xảy ra. Bạn đưa ra độ trễ khi bạn chèn tập lệnh có src được đặt thành URL tiện ích mở rộng của chrome. Bạn có thể nghĩ rằng sẽ không có sự chậm trễ nào vì bạn không tải tài nguyên qua mạng, nhưng không, có sự chậm trễ vì trình duyệt vẫn cần tìm nạp thứ gì đó (tài nguyên tiện ích chrome của bạn) và trong khi quá trình tìm nạp đó đang diễn ra, trang

Nếu bạn thực sự cần thêm một thẻ tập lệnh vào trang mà bạn muốn tập lệnh của mình chạy trước bất kỳ nội dung nào khác trên trang tải, thì bạn cần đặt nội dung của tập lệnh bằng thuộc tính văn bản, không phải thuộc tính src. Bạn có thể cũng muốn đặt thuộc tính async thành false. Trước đây tôi đã gửi một liên kết đến một ví dụ từ Privacy Badger

Nhưng nếu bạn thực sự không cần phải tiêm thẻ script này. Bạn chỉ cần sử dụng ngữ cảnh JS biệt lập mà bạn nhận được theo mặc định trong tập lệnh nội dung nếu muốn tương tác với môi trường JS của trang. Ví dụ: bạn muốn ghi đè thuộc tính tác nhân người dùng trong đối tượng điều hướng. Bạn đã có quyền truy cập vào DOM, bạn đã có thể đọc/ghi vào trang DOM, tạo các phần tử tương tác, lắng nghe các nhấp chuột, v.v. Bạn không thể thấy/sửa đổi các biến JS được trang sử dụng và trang không thể thấy JS của bạn, đó là một điều tốt

Tôi nghĩ bạn nên tạo một tiện ích mở rộng đơn giản chỉ để thực hành và xác minh cách tiếp cận của mình. Đừng phức tạp hóa mọi thứ ngay lập tức với SDK dự án của bạn và các yêu cầu lớn khác dành riêng cho dự án. Tạo tiện ích mở rộng đưa tập lệnh nội dung chưa-có-điều-gì-xảy-ra và lắng nghe lượt nhấp của người dùng rồi chuyển thông tin đó trở lại trang nền

Khi bạn có thể chèn một số mã HTML vào trang web, thì bạn có thể thay đổi hoặc nâng cao cách hoạt động của trang web. Ngoài ra, với tư cách là nhà phát triển, bạn có thể cung cấp cho người dùng của mình những tính năng còn thiếu mà họ luôn tìm kiếm trong một số trang web

Đối với điều này, người ta có thể viết mã Javascript. Nhưng mã này sẽ được đưa vào nguồn trang đích như thế nào?

Bài đăng này sẽ hướng dẫn bạn cách tạo tiện ích mở rộng chrome sẽ xử lý việc đưa mã Javascript của chúng tôi vào trang Gmail. Nếu bạn muốn biết kiến ​​thức cơ bản về cách tạo tiện ích mở rộng cho chrome, bạn có thể đọc bài đăng của chúng tôi về Hướng dẫn tiện ích mở rộng của Chrome để hiển thị nguồn cấp dữ liệu blog RSS

Tải xuống mã từ liên kết được cung cấp bên dưới

Tải xuống tập lệnh

Để có dịch vụ xuất sắc trong Tiếp thị qua email, Gửi thư hàng loạt, Quản lý danh sách email và nhiều dịch vụ khác, bạn phải xem qua MailGet – Nhà cung cấp dịch vụ email

Tiện ích mở rộng của Chrome cung cấp một lối thoát để thực thi tập lệnh của riêng chúng tôi vào một trang web thông qua “tập lệnh nội dung”. Hãy xem đoạn mã sau từ tệp kê khai,

"content_scripts": [
{ "run_at" :"document_end",
"matches": ["https://mail.google.com/*"],
"js": ["jquery-1.11.3.min.js","script.js"],
"css":["css/mycss.css"] }
],

Đây “jquery-1. 11. 3. tối thiểu. js”, “tập lệnh. js”, “mycss. css” là các tệp tôi đã xác định là tập lệnh nội dung của mình

Bạn có thể đã biết rằng trình duyệt chrome yêu cầu một “tệp kê khai. json” trong thư mục của tiện ích mở rộng. Bạn xác định một tệp hoặc một gói gồm nhiều tệp, để đưa tập lệnh nội dung của bạn vào tệp kê khai của tiện ích mở rộng dưới dạng tập lệnh nội dung

Chúng tôi sẽ tiến hành các bước sau để hoàn thành nhiệm vụ của mình. Trong thư mục gốc của tiện ích mở rộng,
1. ) Tạo một tệp có tên “manifest. json” đặt bên trong mã được cung cấp sau.
2. ) Tạo một tập tin Javascript “script. js” mà khi thực thi chèn HTML vào trang Gmail.
3. ) Đặt các kiểu được áp dụng cho HTML được chèn vào một tệp riêng “mystyle. css” và đặt nó vào thư mục CSS.
4. ) Sử dụng chrome. sự mở rộng. getURL(“img/MailGet. png”) sẽ cung cấp đường dẫn tuyệt đối của tệp Mailget. png.

Chuẩn bị bảng kê khai

Nội dung của tệp là tự đề xuất và các nhận xét cũng được cung cấp để giúp bạn hiểu rõ hơn về cách sử dụng.
Trong phần tập lệnh nội dung, có một số thuộc tính bổ sung, chẳng hạn như “run_at” cho tiện ích mở rộng biết khi nào thực thi tập lệnh của chúng tôi với các tùy chọn “document_start”, “document_end” và “document_idle” và nếu bạn định .

Ghi chú. Đừng quên xóa tất cả các nhận xét trong tệp kê khai trước khi bạn sử dụng mã

rõ ràng. json

{
"manifest_version": 2,
//current manifest version by chrome

"name": "Gmail inject pop-up",
"description": "This extension will append an icon in the gmail homepage and a pop-up will appear on click over that icon.",
"version": "1.0",
//Name,Description & version of your extension

"content_scripts": [    <-------------------------------------------------------------Content Script details in manifest
{ "run_at" :"document_end",
"matches": ["https://mail.google.com/*"],
"js": ["jquery-1.11.3.min.js","script.js"],
"css":["css/mycss.css"]
} ],
//"run_at" tells when to load the javascript,
//"matches" tells the URL to match to inject the code which I'm using Gmail here,
//"js" tells all .js files to inject,
//"CSS" tells about all included CSS files for injection.

"web_accessible_resources":["img/*.png"]
}
//web_accessible_resources specify the path and format of files which the web page require to load from extension.
//But why? because webpage and extension executes in isolated environments.They can't access one another's resources directly.
//and in the following way we allow web page to access the required files from extension.

Tệp kịch bản nội dung

kịch bản. js

Tập lệnh sau hướng dẫn tiện ích mở rộng thêm "biểu tượng có thể nhấp với mã HTML bật lên" vào trang gmail

$(document).ready(function() {   // Load the function after DOM ready.

var link1=chrome.extension.getURL("img/MailGet.png");     //Get absolute path of the file residing your extension.
var t1='<div id="pop"><a href=""><img id="mgt" src="'+link1+'"width="25" height="24"></a></div>'    //now set the src to absolute path.
$(".gb_Lb").prepend(t1);     //Insert MailGet icon into top-right corner of Gmail home.

var link2=chrome.extension.getURL("img/button_cancel.png");
var link3=chrome.extension.getURL("img/AoRankLogo.png");
var t2='<div id="pop_bg" style="height: 100%; width: 100%;"></div><div id="mgt_popup"><span class="popup_close"></span><div><img id="logo" src="'+link3+'"/></div><div id="pop_inner"><label id="user"></label><input type="button" id="mailgett" value="Go To MailGet"/></div></div>'
$("body").append(t2);

$("#pop").click(function() {//click on injected mailget icon.
event.preventDefault();//first stop default behaviour of anchor.
$("#pop_bg").css("display", "block");//Show pop-up background.
$("#mgt_popup").css("display", "block");//Show pop-up div.
//Inject dynamically generated html from here( However i've used a string only).
$("#user").html("MailGet is an online Email Management Service which allow you to Send Bulk and Drip Emails<br><br>");
});

$(".popup_close").click(function(){//click close symbol hides popup
$("#pop_bg").css("display", "none");
$("#mgt_popup").css("display", "none");
});

$("#mailgett").click(function() { // click on "Go To Mailget" button hides popup and opens provided url in new tab.
$("#pop_bg").css("display", "none");
$("#mgt_popup").css("display", "none");
window.open("https://www.formget.com/mailget/" , '_blank');
});
});

mycss. css

Bản thân tiện ích mở rộng sẽ đưa các kiểu CSS sau vào trang đích nếu tệp được chỉ định chính xác trong tệp kê khai. json

@import url(http://fonts.googleapis.com/css?family=Raleway);

img#mgt{
border-radius:10px;
}
div#pop_bg{
opacity:0.6;
background: #000;
left: 0;
position: absolute;
top: 0;
z-index: 500;
display:none;
height: 100%;
width: 100%;
}
div#mgt_popup{
background: #FFF;
height:330px;
width:500px;
z-index:550;
display:none;
left: 42%;
top: 52%;
margin-left:-110px;
margin-top:-228px;
position: absolute;
border: 5px solid rgba(58, 53, 40, 0.46);
}
.popup_close{
background:url("https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-22-48.png") no-repeat;
height: 48px;
width: 48px;
position: absolute;
top: -9px;
left: 461px;
opacity: 0.5;
cursor:pointer;
}
input[type=button]{
margin: 27px 0px 0px -52px;
color: #fff;
background-color: #FFBC00;
border-color: #FFBC00;
padding: 12px 130px;
border:1px solid white;
font-family:raleway !important;
font-Weight:bold;
font-size:18px;
color:white;
}
div#pop{
width: auto;
height: auto;
padding-left: 17px;
padding-top: 2px;
}
#pop_mail_read{
margin: 75px 0 0 184px;
}
img#logo{
margin: 37px 8px 26px 33%;
}
div#pop_inner{
margin: 0 22%;
text-align: center;
}

Tải xuống tệp Jquery và đặt nó vào thư mục ứng dụng. Đảm bảo tên tệp là chính xác trong tệp kê khai

Tải tiện ích mở rộng

Làm theo các bước sau.
1. ) Đi tới “Trình đơn<
2. ) Kiểm tra tùy chọn “chế độ nhà phát triển” để bật tải tiện ích mở rộng.
3. ) Nhấp vào "Tải tiện ích mở rộng đã giải nén" rồi chọn thư mục ứng dụng (không nén).
Tiện ích mở rộng hiện đã được tải trong chrome để thực thi.

Mở Gmail trong trình duyệt và bạn sẽ thấy biểu tượng MailGet 

Bây giờ hãy nhấp vào biểu tượng đó và một cửa sổ bật lên sẽ xuất hiện. Đây là cùng một cửa sổ bật lên mà chúng tôi đã đưa vào dưới dạng HTML

Phần kết luận

• Chúng tôi đã tạo tiện ích mở rộng chrome để thực thi javascript(script. js) bên trong một trang web
• Chúng tôi đã chỉ định trang web là “gmail. com” nếu không thì người ta cũng có thể làm cho tập lệnh hoạt động trên nhiều hoặc tất cả các trang và tab
• CSS mà chúng tôi đã tạo cho HTML của mình sẽ tự động được áp dụng nếu đường dẫn trong tệp kê khai là chính xác
• Chrome chạy tập lệnh của chúng tôi khi có URL trong thanh địa chỉ khớp với gmail

Hơn nữa, bạn cũng có thể mở rộng tập lệnh để xử lý giao tiếp với các tài nguyên bên ngoài

Tôi hy vọng rằng bây giờ khái niệm chèn mã vào một trang web sẽ rõ ràng với bạn. Chơi với mã và vui lòng cho chúng tôi biết nếu bạn gặp bất kỳ sự cố nào. Tiếp tục truy cập trang web của chúng tôi để biết thêm nhiều blog hữu ích. Cảm ơn vì đã đọc

Tiện ích mở rộng chrome tiêm JS là gì?

Bạn có thể tạo tiện ích mở rộng chrome bằng JavaScript không?

Bạn có thể tiêm JavaScript không?

Bạn có thể cài đặt tiện ích mở rộng chrome theo cách thủ công không?