Hướng dẫn can you make a chrome extension with javascript? - bạn có thể tạo một tiện ích mở rộng chrome bằng javascript không?

Các tiện ích mở rộng Chrome là một cách hữu ích để cá nhân hóa trải nghiệm trình duyệt của bạn và làm cho riêng bạn là một dự án cuối tuần tuyệt vời cho người mới bắt đầu và các lập trình viên có kinh nghiệm.

Những thứ cơ bản

Trong hướng dẫn này, chúng tôi sẽ đi qua một tiện ích mở rộng đơn giản sẽ giúp tự động hóa một nhiệm vụ đơn giản trên Reddit. Sau khi chọn bất kỳ subreddit nào, tiện ích mở rộng của chúng tôi sẽ cung cấp tùy chọn để khởi chạy một tab mới trực tiếp cho các bài đăng hàng đầu của Subreddit đó mọi thời đại.Top Posts of All Time.

Khi người dùng nhấp chuột phải, họ sẽ được cung cấp tùy chọn này. Cách mạng? Không thực sự, nhưng tiện ích mở rộng này cho thấy một số tính năng cơ bản có thể được sửa đổi và xây dựng theo nhiều cách khác nhau, mạnh mẽ hơn.

Bạn có thể xem GitHub cho toàn bộ dự án này ở đây, và thoải mái sao chép và thay đổi nó theo cách bạn muốn.here, and feel free to copy and change it however you want.

Bắt đầu nào.

Phần một | Thêm một phần mở rộng cho Chrome

Đầu tiên, hãy đến Chrome: // Tiện ích mở rộng, mà bạn có thể nhập hoặc dán trực tiếp vào thanh tìm kiếm Chrome. Ở phía trên bên phải, sẽ có một tùy chọn để bật chế độ nhà phát triển. Cứ liều thử đi.chrome://extensions, which you can type or paste directly into the Chrome search bar. On the top right, there will be an option to turn on Developer Mode. Go for it.

Một số tính năng mới sẽ xuất hiện, bao gồm một tùy chọn để tải chưa đóng gói, bạn có thể sử dụng để nhập một thư mục chứa một tiện ích mở rộng mới. Vào cuối hướng dẫn này, dự án của chúng tôi sẽ trông như thế này:Load unpacked, which you can use to import a folder containing a new extension. At the end of this tutorial, our project will look like this:

Tuy nhiên, bạn không phải đợi cho đến khi bạn hoàn thành để giải nén phần mở rộng của bạn vào Chrome. Trên thực tế, ngay khi bạn đặt một số tệp vào thư mục dự án của mình, bạn có thể kiểm tra mọi thứ và xem chúng đang chạy như thế nào.

Điều đó đang được nói, hãy để bắt đầu thực hiện phần mở rộng của chúng tôi.

Phần hai | Viết chương trình

Một phần mở rộng chrome cơ bản có ba phần; một hình ảnh biểu tượng, tệp broading.js và một bản kê khai.json. Bên cạnh bản kê khai, thường bị bỏ lại một mình, chúng ta có thể tổ chức hai người còn lại thành các thư mục như thế này:icon image, a background.js file, and a manifest.json. Aside from the manifest, which is usually left alone, we can organize the other two into directories like this:

Về mặt kỹ thuật, chúng tôi không cần phải sử dụng thư mục. Nhưng, đó không phải là một ý tưởng tồi để thực hành tổ chức tốt, đặc biệt là nếu bạn có kế hoạch làm cho phần mở rộng phức tạp hơn của riêng bạn sau này.

Bây giờ, hãy để Lừa xem xét bản kê khai.json.

Thêm bản kê khai.

Tệp kê khai.json cho biết thông tin chính của Chrome về phần mở rộng của chúng tôi, các phần khác nhau của nó và cách xử lý từng thông tin. Hãy để một cái nhìn.manifest.json file tells Chrome key information about our extension, its different parts, and how to handle each one. Let’s take a look.

"manifest_version": 2,"name": "Top Posts Viewer","version": "1.0","description": "Launch a new tab with top posts from any subreddit.",

Ngoài việc nhớ sử dụng “manifest_version”: 2 (phiên bản đầu tiên không còn được chấp nhận), mọi thứ khác đều khá tự giải thích. Tiện ích mở rộng của chúng tôi cần name, ________ 9 (trong trường hợp chúng tôi quyết định gửi và cập nhật trong cửa hàng trang web Chrome) và một bản tóm tắt ____1010 về những gì nó làm.

Sau đó, chúng tôi cần nói với Chrome về bất kỳ thông tin đặc biệt nào mà dự án của chúng tôi cần truy cập. Đối với dự án này, có hai điều:

"permissions": [    "contextMenus",    "tabs"],

Menu ngữ cảnh là menu xuất hiện khi bạn nhấp chuột phải vào một cái gì đó trong trình duyệt của mình. Để thêm một tùy chọn cho người dùng ở đó, chúng tôi sẽ cần yêu cầu quyền sửa đổi nó. Ngoài ra, vì chúng tôi muốn khởi chạy một tab mới trong trình duyệt, chúng tôi cần quyền truy cập các tab.context menu is the menu that appears when you right-click something in your browser. In order to add an option for the user there, we will need to request permission to modify it. Also, since we want to launch a new tab in the browser, we need permission to access tabs.

Từ đó, bây giờ chúng tôi phải nói với Chrome về các kịch bản dự án của chúng tôi. Chúng tôi chỉ có một, nằm trong thư mục JS, vì vậy nó trông như thế này:js directory, so it looks like this:

"background": {    "scripts": ["js/background.js"]},

Bây giờ, tất cả những gì chúng ta phải làm là giải thích cách xử lý hình ảnh biểu tượng của chúng ta.

"browser_action" : {    "default_icon" : "images/icon.png"},"icons": {    "16": "images/icon.png",    "32": "images/icon.png",    "48": "images/icon.png",    "128":"images/icon.png"   }}

"permissions": [    "contextMenus",    "tabs"],

1 là những gì xuất hiện trong thanh công cụ mở rộng và các biểu tượng khác xuất hiện ở các phần khác nhau của cửa hàng trang web Chrome. Đối với một dự án chuyên nghiệp hơn, bạn nên bao gồm các kích thước khác nhau của biểu tượng để có độ phân giải tốt hơn, nhưng đối với dự án này, tôi chỉ sử dụng cùng một.

Điều đó bao gồm bản kê khai, vì vậy hãy để Lừa đi vào tệp JavaScript chính.

Thêm tập lệnh nền

Một tập lệnh nền lắng nghe các sự kiện hoặc hành động chính trong trình duyệt và phản ứng với mã cụ thể. Đây là nơi chương trình của chúng tôi sẽ thực sự chạy, và có một vài điều chính chúng tôi cần nó để làm.background script listens for key events or actions in the browser and reacts with specific code. This is where our program will actually run, and there are a few key things we need it to do.

Đầu tiên, chúng tôi muốn thêm một phần tử có thể chọn trong menu ngữ cảnh nhấp chuột phải. Ở đầu nền.js, chúng ta có thể thêm:right-click Context Menu. At the very top of background.js, we can add:

chrome.contextMenus.create ({    "title": "View Top Posts From This Subreddit",    "contexts": ["selection"],    "onclick": openTab()});

Thuộc tính

"permissions": [    "contextMenus",    "tabs"],

2 sẽ xuất hiện trong menu, cùng với biểu tượng từ tệp kê khai của chúng tôi. Tiếp theo, ________ 13 giải thích rằng chúng tôi đang tìm cách nắm bắt văn bản đã chọn (đối với chúng tôi sẽ là tên subreddit). Cuối cùng,

"permissions": [    "contextMenus",    "tabs"],

4 nói với Chrome phải làm gì khi ai đó chọn phần tử menu ngữ cảnh của chúng tôi.manifest.json file. Next,

"permissions": [    "contextMenus",    "tabs"],

3 explains that we are looking to capture selected text (which for us is going to be subreddit name). Finally,

"permissions": [    "contextMenus",    "tabs"],

4 tells Chrome what to do when someone selects our context menu element.

Trong trường hợp này, chúng tôi muốn gọi chức năng này, chúng tôi sẽ cần viết bên dưới. Chức năng này thực sự sẽ mở tab mới liên kết với các bài đăng hàng đầu của Subreddit đã chọn mọi thời đại. Nó sẽ trông như thế này:Top Posts of All Time. It’ll look like this:

function openTab(){    return function(info, tab){        let text = info.selectionText;        let redditLink = "https://www.reddit.com/" + format(text) +     
        "/top/?t=all"        chrome.tabs.create ({index: tab.index + 1, url: redditLink, 
        selected: true});    }};

Nếu bạn đang tự hỏi tại sao chức năng của chúng tôi ngay lập tức gọi một chức năng khác, thì đó là một thủ thuật gọn gàng để tìm hiểu thông tin hạn chế thường được phép vào các tập lệnh nền. Bằng cách này, chúng tôi không cần bất kỳ tệp JS bổ sung nào.

Với cách đó, điều đầu tiên chúng tôi muốn làm là lưu trữ tên subreddit được chọn trong một biến có tên là

"permissions": [    "contextMenus",    "tabs"],

6.

Sau đó, chúng ta có thể kẹp biến vào URL ở trên, điều này sẽ đưa chúng ta đến bất kỳ bài đăng hàng đầu nào của Subreddit. Nhưng trước tiên, chúng tôi sẽ nhanh chóng vượt qua

"permissions": [    "contextMenus",    "tabs"],

6 thông qua một chức năng mà chúng tôi sẽ

"permissions": [    "contextMenus",    "tabs"],

8.Top Posts of All Time. But first, we will quickly pass

"permissions": [    "contextMenus",    "tabs"],

6 through a function we willcall

"permissions": [    "contextMenus",    "tabs"],

8.

function format(subName){    if (subName[0] === "r" && subName[1] === "/"){        return subName    }    else {        return "r/" + subName    }};

Đôi khi Chrome bỏ qua R/R/khi nhấp chuột phải, vì vậy chức năng này đảm bảo rằng chúng tôi đang đặt một tên subreddit với định dạng thích hợp vào URL của chúng tôi. Nếu R/R/không được chọn đúng cách, nó sẽ tự động thêm vào một biến mới gọi là

"permissions": [    "contextMenus",    "tabs"],

9.

Bây giờ chúng tôi có liên kết chính xác, bước cuối cùng là tạo tab mới. Quay trở lại

"background": {    "scripts": ["js/background.js"]},

0Above, chúng tôi sẽ sử dụng

"background": {    "scripts": ["js/background.js"]},

1 để tạo một tab mới và cung cấp

"permissions": [    "contextMenus",    "tabs"],

9 khi URL mở ra. Cuối cùng, với

"background": {    "scripts": ["js/background.js"]},

3 Chrome sẽ đưa người dùng đúng với các bài đăng hàng đầu của subreddit đó mọi thời đại và họ có thể duyệt đi.Top Posts of All Time and they can browse away.

Phần ba | Bước tiếp theo

Bây giờ chúng ta có một phần mở rộng đầy đủ chức năng, mặc dù tương đối đơn giản, chrome, cuối cùng chúng ta có thể gửi đến cửa hàng trang web Chrome.Chrome Web Store.

Nhưng trước đó, có rất nhiều cách để chơi xung quanh với phần mở rộng này và sử dụng nó như một khối xây dựng để tự làm. Các tiện ích mở rộng phức tạp hơn thậm chí có thể sử dụng HTML hoặc CSS cho những thứ như cửa sổ bật lên, hình ảnh động, v.v ... Có rất nhiều bạn có thể làm.

Cứ liều thử đi. :)

Tôi có thể làm cho phần mở rộng chrome của riêng mình không?

Bạn có thể xây dựng một phần mở rộng chrome với React không?

Làm cách nào để tạo tiện ích mở rộng Chrome trong TypeScript?

Các tiện ích mở rộng Chrome có thể sử dụng Node JS không?