[TOC] ## content content 用于嵌入到網頁中 ## 示例 ### 無UI嵌入 baidu.ts ``` import type { PlasmoContentScript } from "plasmo" export const config: PlasmoContentScript = { matches: ["https://www.baidu.com/*"], all_frames: true } window.onload=function () { console.log("asdasd"); } ``` 不指定PlasmoContentScript 則在所有頁面都生效 ### 嵌入到指定位置 <details> <summary>/contents/plasmo-inline.vue</summary> ``` <script lang="ts"> import type { PlasmoContentScript, PlasmoGetInlineAnchor, PlasmoMountShadowHost } from "plasmo" export const config: PlasmoContentScript = { matches: ["https://www.plasmo.com/*"] } // 嵌入到主頁的位置 const getInlineAnchor: PlasmoGetInlineAnchor = () => document.querySelector("#supercharge > h3 > span") const mountShadowHost: PlasmoMountShadowHost = ({ anchor, shadowHost }) => { anchor!.element!.insertBefore(shadowHost!, anchor!.element!.firstChild) } window.addEventListener("load",function () { console.log("content script loaded"); document.body.style.background = "pink" }) export default { plasmo: { getInlineAnchor, mountShadowHost }, data() { return { count: 0 } }, setup() {}, mounted() {} } </script> <template> <div> <span style="color: red">{{ count }}</span> <button @click="count++">Many Myths are based on truth</button> </div> </template> ``` </details> <br/> ## 嵌入css,并不指定嵌入位置 <details> <summary>contents/plasmo-overlay.css</summary> ``` .hw-top { background: red; color: white; font-family: "Fascinate"; } /*嵌入內容的寬度*/ #plasmo-shadow-container { width: 100px; background-color: purple; } #plasmo-mount-container { border: 8px solid aqua; } ``` </details> <br/> <details> <summary>contents/plasmo-overlay.vue</summary> ``` <template> <span class="hw-top"> If I can have honesty, it's easier to overlook mistakes </span> </template> <script lang="ts"> import cssText from "data-text:~/contents/plasmo-overlay.css" import type { PlasmoContentScript, PlasmoGetStyle } from "plasmo" export const config: PlasmoContentScript = { matches: ["https://www.plasmo.com/*"] } const getStyle: PlasmoGetStyle = () => { const style = document.createElement("style") style.textContent = cssText return style } export default { plasmo: { getStyle }, setup() {}, mounted() {} } </script> ``` </details> <br/>