Notes about problems encountered in Plug-in development with browser Account Login

Background

Due to work related to company accounts, it is often closely related to various businesses. Recently, a business asked me about account logon problems and suddenly came up with an idea: why am I the front-end of the responsible account, do not implement a convenient plug-in by yourself? As a result, we started to develop an internal Chrome browser plug-in. This plug-in is used to help developers or test the Quick Switch account for login, and only focus on functions, the portal for setting or modifying account information is displayed to accelerate the development and testing efficiency. Start preparationThis idea is my personal idea, and integrates the problems previously reported by the business. I thought about the main functions and how to present them. After the appearance of this internal product, technical preparation began. First of all, this is the plug-in of the Chrome browser. Obviously, you need to check the plug-in development documentation. Here, you can find the official chrome documentation and official documentation translations. Obviously, it is easier for me to start with the translation. Let's take a brief look at the introduction and some of the main functions. I have read a lot of documents ( Https://crxdoc-zh.appspot.com/extensions/index)The translation and production are clear and comfortable. If you develop the chrome plug-in, we suggest you refer to this document and thank you for your reference! If you can't see it, you can also come here (https://lmk123.duapp.com/extensions/devguide), an address that does not need FQ. Hands-on ProcessI saw the example of getting started documentation (https://lmk123.duapp.com/extensions/getstarted), it is very easy to successfully make the plug-in on the example, the instant confidence burst, I feel that writing plug-ins is quite simple. When I wrote my plug-in by myself, I found it was too painful. Various errors cannot be run. The following describes the outstanding problems in this process, which may be of reference to everyone, especially new users.

• Configuration of content_scripts in manifest. JSON

Here, you can configure JS or CSS files to be injected into the page, and there are other configuration options. For instructions on these configurations, refer to the documentation. I will not describe them here. Note that:

• The introduced JS file must be a local file and cannot be an online resource;
• The permission to control the injected JS is valid under those domain names;
• During the development process, make sure that the JS injected into the page has been successfully injected before debugging;
• Content_scrpit configuration JS and chrome. Tabs. excutescript (Tabid, {file: 'xxx. js'}, callback) belongs to the same function
• The JS execution environment of pages and plug-ins is independent and cannot use the other party's variables or methods.
• Cross-origin requests in the plug-in

The Request Method of a third-party library (such as jquery) cannot be used for the request sent by the plug-in, because the request sent in this way will be cross-origin. Solution: Use XMLHttpRequest to solve the problem. Note that, due to security restrictions, you cannot set reffer through setRequestHeader. You can encapsulate a method by yourself, which will be easy to use in the future. Note that the request address to be sent must be configured in permissions in manifest. JSON. Otherwise, an error may occur.

• Communication between plug-ins and pages

There are many communication methods and different interfaces between pages. Of course, there are also some applicable scenarios. These interfaces can only be used in different versions of chrome, so pay attention to them when using them. Here (https://lmk123.duapp.com/extensions/devguide) for each interface description more detailed. The communication method I used is chrome. tabs. sendrequest (Tabid, {}, function (response) {}); chrome. extension. onrequest. addlistener (function (message, sender, sendresponse) {}); transmits messages in the preceding method. For other methods, see the document. Legacy problemsI encountered a very strange phenomenon. Some pages cannot be injected with JS, and there is no reason for it. I hope you can share it with others. I am very grateful, Plug-in function displayThe logged-on account information display and Related Function Modification entry logon accounts display the list of test accounts, and then one-click logon. The account list is maintained by the server, which ensures that the account list information is updated. Because it was the first development, I shared some of my feelings and it was inevitable that there would be problems. Thank you for your patience. References: https://lmk123.duapp.com/extensions/devguidehttp://open.se.360.cn/open/extension_dev/getstarted.htmlhttps://developer.chrome.com/extensions

Notes about problems encountered in Plug-in development with browser Account Login