你能在网页元素中搜索特定的单词吗？Chrome扩展，Javascript

是一种脚本语言，可以通过在网页中嵌入Javascript代码来实现对网页元素的搜索和操作。

在网页中搜索特定的单词可以通过Javascript的DOM操作来实现。DOM（文档对象模型）是一种用于表示和操作HTML和XML文档的标准编程接口。通过使用DOM提供的方法和属性，可以轻松地搜索和操作网页中的元素。

以下是一种使用Javascript在网页元素中搜索特定单词的示例代码：

// 获取网页中的所有文本内容
var pageText = document.body.innerText;

// 搜索特定的单词
var searchTerm = "特定单词";
var searchResult = pageText.includes(searchTerm);

// 输出搜索结果
console.log("搜索结果：" + searchResult);

在上述示例中，首先通过document.body.innerText获取网页中的所有文本内容，然后使用includes()方法搜索特定的单词。最后，通过console.log()输出搜索结果。

对于Chrome浏览器，可以通过开发Chrome扩展来实现在网页元素中搜索特定单词的功能。Chrome扩展是一种可以自定义和增强Chrome浏览器功能的插件。通过编写扩展程序，可以在浏览器中添加新的功能和工具。

以下是一种使用Chrome扩展实现在网页元素中搜索特定单词的示例代码：

创建一个名为manifest.json的文件，用于描述扩展的配置信息：

{
  "manifest_version": 2,
  "name": "搜索特定单词",
  "version": "1.0",
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content.js"]
    }
  ],
  "browser_action": {
    "default_popup": "popup.html"
  }
}

创建一个名为content.js的文件，用于编写扩展的逻辑代码：

// 监听来自popup.html的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "search") {
    // 获取网页中的所有文本内容
    var pageText = document.body.innerText;

    // 搜索特定的单词
    var searchTerm = request.searchTerm;
    var searchResult = pageText.includes(searchTerm);

    // 发送搜索结果给popup.html
    sendResponse({ result: searchResult });
  }
});

创建一个名为popup.html的文件，用于创建扩展的弹出窗口：

<!DOCTYPE html>
<html>
<head>
  <title>搜索特定单词</title>
  <script src="popup.js"></script>
</head>
<body>
  <h1>搜索特定单词</h1>
  <input type="text" id="searchTerm" placeholder="输入要搜索的单词">
  <button id="searchButton">搜索</button>
  <div id="result"></div>
</body>
</html>

创建一个名为popup.js的文件，用于处理弹出窗口的逻辑代码：

// 获取弹出窗口中的DOM元素
var searchTermInput = document.getElementById("searchTerm");
var searchButton = document.getElementById("searchButton");
var resultDiv = document.getElementById("result");

// 监听搜索按钮的点击事件
searchButton.addEventListener("click", function() {
  // 获取要搜索的单词
  var searchTerm = searchTermInput.value;

  // 向content.js发送消息
  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, { action: "search", searchTerm: searchTerm }, function(response) {
      // 显示搜索结果
      resultDiv.innerText = "搜索结果：" + response.result;
    });
  });
});

通过以上步骤创建完成Chrome扩展后，可以在Chrome浏览器中加载该扩展，并在弹出窗口中输入要搜索的单词，点击搜索按钮后，扩展将在当前网页中搜索该单词，并显示搜索结果。

以上是使用Javascript和Chrome扩展实现在网页元素中搜索特定单词的方法。希望对你有帮助！

从弹出到不使用sendMessage扩展的content.js

google-chrome-extension、popup、sendmessage

我正在尝试为一个chrome扩展创建一个弹出界面。我似乎无法从popup.html/popup.js向content.js脚本发送消息。到目前为止我的情况是这样的。当我点击扩展图标时，我会得到一个按钮，上面写着点击。我点击它，什么都不会发生，没有铬javascript控制台中的错误，也没有给content.js的消息。清单 { "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", "manife

浏览 3提问于2015-04-28得票数 21

2回答

chrome扩展中的消息传递不起作用

javascript、google-chrome、google-chrome-extension、event-listener、message-passing

我是chrome扩展的新手，并且在开始时遇到了一些麻烦。首先，我的总体目标是能够单击弹出窗口中的一个按钮，并在DOM中进行一些更改。如果我理解正确的话，这样做的方法是加载一个内容脚本并向该内容脚本发送一条消息。这是我在Chrome开发者页面上看到的，但我在控制台日志中没有看到任何东西： manifest.json { "manifest_version": 2, "name": "Test", "version": "1.0", "permissions": [

浏览 1提问于2013-04-18得票数 1

回答已采纳

1回答

Chrome扩展:：尝试理解chrome.runtime.sendmessage到chrome.runtime.onMessage的语法

javascript、html、google-chrome、google-chrome-extension、firefox-addon-webextensions

对于chrome.runtime.sendmessage如何将数据从Content.js文件发送到chrome.runtime.onMessage Background.js文件的语法，我有一些问题。我试图注入一个脚本来查看网页指标，并在导航到新页面时在Chrome扩展弹出中显示它们。我无法看到从content.js脚本发送到background.js脚本的变量。我不需要在会话之间缓存数据，只希望我的脚本运行在用户所在的当前选项卡中。我的Content.js脚本应该与位于Manifest.js中的"run_at": "document_idle"一起执行。 B

浏览 5提问于2021-10-13得票数 1

回答已采纳

1回答

当弹出式脚本重新打开时，为什么弹出脚本会向内容脚本发送更多的消息？

firefox-addon、firefox-addon-webextensions

我有火狐网络扩展。在popup.html中，我有一个按钮，通过单击它，popup.js向content.js发送消息。Content.js接收消息，并使用文本“消息从弹出”使console.log。如果我再次单击该按钮，则会重复此操作。问题是当我单击“远离弹出”并再次打开弹出窗口并再次单击该按钮时，因为content.js接收到来自popup.js的两条消息并创建了两个console.log。如果我再重复一遍，content.js会收到三条消息，依此类推。我要重新打开弹出窗口多少次，就像消息发送的次数一样。我认为问题出在popup.js的某个地方，但我不知道。 manifest.json：

浏览 0提问于2019-01-01得票数 1

回答已采纳

1回答

通过Chrome扩展在内容和PopUp之间传递信息

javascript、google-chrome、google-chrome-extension

我试图通过一个铬扩展名将一些信息从content.js传递给Popup.js，但是我不知道该如何做，我已经阅读了文档，但仍然不知道它是如何工作的，我只让content.js工作。我的想法是在弹出窗口上创建一个基于content.js提供的数组的列表。 The content.js: console.log("Working"); const list = new Array(); const interval = setInterval(() => { let names = document.getElementsByClassName("cS7aqe"

浏览 2提问于2020-05-20得票数 0

回答已采纳

1回答

Chrome扩展addEventListener为空

javascript、google-chrome、dom、google-chrome-extension

我几周前才开始学习JS，正在尝试构建一个Chrome扩展。我已经构建了一个manifest.json、popup.html、popup.js和content.js文件。当我尝试在Chrome上运行后台页面控制台来查看popup.js是否正常工作时，我一直收到错误消息： Uncaught TypeError: Cannot read property 'addEventListener' of null at popup.js:8 我尝试将html中的脚本移到正文的底部，但它仍然以错误结束，并尝试实现： document.addEventListener('DOMCon

浏览 1提问于2018-05-15得票数 0

1回答

铬扩展。JS适用于弹出窗口，而不是主窗口。

javascript、html、jquery、google-chrome-extension

所以我有麻烦了。我正在做一个铬的扩展，我有popup.html (有信用的窗口)，content.js，background.js (点击就行)。主要的问题是，当我点击扩展background.js的图标时，我点击了它，开始处理弹出页面，而不是我需要的页面。我试图在popup.js中实现它，但同样的事情是，它在popup.html页面中工作，而不是在主页上工作。如何更改js代码？ Content.js的主要部分： chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { if( r

浏览 7提问于2020-04-27得票数 1

回答已采纳

2回答

从弹出窗口向内容脚本发送消息- Chrome扩展

google-chrome-extension

当我通过浏览器操作按钮打开popup.html时，我想要更新html。popup.js应该向在当前选项卡上运行的内容脚本发送消息，并且应该接收响应并更新html。但是，内容脚本不会收到任何消息，因此不会发送正确的响应。 Content.js var text = "hello"; chrome.runtime.onMessage.addListener( function(message, sender, sendResponse) { switch(message.type) { case "getText":

浏览 2提问于2017-07-19得票数 19

回答已采纳

3回答

只在单击图标时运行

javascript、html、google-chrome、google-chrome-extension

我希望我的Chrome扩展加载Javascript一旦用户访问一个网站。但是目前，只有当用户单击扩展图标，直到扩展弹出打开时，Javascript才会被执行。我在这个问题中看到了答案。我的manifest.json是： { "manifest_version": 2, "name": "Javascript example", "description": "Some description.", "version": "1.1", "browse

浏览 4提问于2017-12-28得票数 2

回答已采纳

2回答

多次触发Chrome扩展消息

javascript、google-chrome、google-chrome-extension、sendmessage

我正在进行我的第一个铬扩展，并注意到从我的popup.html页面发送的消息在我的content.js消息事件侦听器中被复制。我在每条消息发送之前记录了“发送消息”，在每条消息之前记录了“消息接收”，我不明白这些消息是如何被复制的。我还检查了和的chrome文档，它指定每个sendMessage事件只能触发一次onMessage侦听器。任何帮助都将不胜感激。 popup.html <!DOCTYPE html> <html> <head> <title>Messaging Practice</title> </head

浏览 0提问于2018-04-17得票数 6

1回答

在chrome扩展中，popup和content.js不能通信

javascript、jquery、google-chrome、google-chrome-extension

我正在尝试从一个用chrome扩展打开的选项卡中获取数据。到目前为止，我的扩展可以打开一个带有正确链接的新标签，但我无法让content.js响应我弹出窗口中的submit按钮。我的全部代码如下所示。我真的很感谢任何人的帮助。 popup.js $(document).ready(function(){ function d(c){ console.log(c) } $('#rt').click(function(){ var mov = $('input:text').val() //open n

浏览 3提问于2017-01-30得票数 0

1回答

消息传递铬扩展

google-chrome-extension、sendmessage

我想要创建一个扩展，内容脚本将发送消息到后台页面，然后在浏览器上操作意味着点击扩展图标将访问该背景页面并获取一些数据。我使用的是windows8上的chrome版本23.0.1271.64米。我收到了跟随错误。端口错误:无法建立连接。接收端不存在。我试着解决同样的问题。但是人们正在使用sendRequest，这是不受chrome20+支持的。我还找到了提到的铬20+的解决方案。但不起作用。请帮帮忙。下面是文件内容。 manifest.json { "name": "Test Extension", "version": "1

浏览 2提问于2012-11-11得票数 0

回答已采纳

1回答

如何将数据从content.js发送到popup.js？

javascript、google-chrome-extension

我想将数据从content.js发送到popup.js，content.js只是抓取文档标题，然后将其传递给popup.js。因此，popup.js将更改popup.html DOM。 manifest.json： { "browser_action": { "default_icon": { "64": "icons/icon64.png" }, "default_popup": "popup.html"

浏览 3提问于2018-11-17得票数 1

回答已采纳

1回答

Chrome扩展无法从弹出文件加载我的JavaScript

javascript、jquery、html、google-chrome、popup

我正在为一个论坛构建一个Chrome扩展，但问题是我的popup.html上的JavaScript什么也做不了。我添加了警报(“popup.js running...")在顶部，它确实出现了，但然后我的弹出式窗口根本不显示。这是一个问题，因为弹出页面将需要JavaScript。我有点迷路了，所以我想我只是遗漏了一些阻止我的JavaScript运行的东西。我听说AdBlock扩展会阻止它运行，但我删除了它，它仍然不起作用。有人看到问题了吗？ manifest.json { "name": "Riggy", "short_name&#

浏览 0提问于2013-11-23得票数 2

1回答

Chrome扩展错误试图将数组从内容脚本发送到弹出脚本

javascript、google-chrome-extension、callback

我试图在用户当前所在的网页上找到所有的图像，并在用户单击扩展时显示它们。我看了很多帖子，似乎找到了最好的方法来做到这一点:在激活popup.js脚本消息时让content.js脚本发送给它，然后让content.js脚本获取图像并将其发送回popup.js脚本。但是，我总是会得到一个错误(如下所示)。这些是相关的档案： manifest.json { "manifest_version": 2, "name": "Picture Finder", "version": "1.0",

浏览 3提问于2016-03-22得票数 3

回答已采纳

1回答

Chrome扩展中JS/HTML之间的通信

javascript、html、google-chrome-extension

我试图在没有任何JS知识的情况下做我的第一个Chrome扩展，而且我在做这件事时遇到了一些困难。扩展做什么？它是一个页面操作扩展，用于生成字符串并将其复制到剪贴板上。该字符串包含DOM中的某些元素属性。范围它只适用于两页(以下域是示例)： * * 扩展的元素该扩展具有一个popup.html，其中有三个可单击的选项，由用户自行选择：无响应无效有效根据用户从弹出窗口中的选择以及选项卡URL是否包含"CFMEWFA“或"FraudPrevention”对字符串进行格式化。 popup.html <!doctype html

浏览 6提问于2016-06-21得票数 0

2回答

从popup.html到content.js的Chrome扩展sendMessage无法正常工作

javascript、google-chrome-extension、communication

我正在尝试构建一个从popup.html发送数据到标签圆顶的扩展，但是我不能让sendMessage工作，我也不明白为什么。我遵循这个指导原则：以下是我的资料来源： manifest: { "manifest_version": 2, "name": "OMG Campaign Preview Maker", "description": "Easy OMG Campaign Preview Maker", "background": { "scripts"

浏览 2提问于2013-03-22得票数 0

回答已采纳

1回答

chrome扩展-使用django后端登录popup.html

javascript、google-chrome、google-chrome-extension

我正在尝试完成这个登录过程。在扩展中，与往常一样，还有popup.html、popup.js、background.js和content.js。在popup.html中，有用户名、密码、输入字段和登录按钮。我的愿景是:我将捕获popup.js中的两个输入并将它们发送到background.js，然后从那里将它们发送到django后端。django后端返回登录令牌。第一，这是否可能呢？我的第一步不起作用:我不能从popup.js发送消息到background.js。控制台没有错误，也没有成功。这是我的密码： popup.js handleLoginClick_: function(){

浏览 6提问于2014-08-04得票数 3

回答已采纳

2回答

在chrome扩展上使用background.js的目的是什么？

javascript、jquery、html

我还没有看到background.js或background.html的用处。它看起来就像是一个中间人。通过使用popup.html/popup.js中的以下代码(浏览器操作)，我可以轻松地与我的所有内容脚本通信： if (e.target.id === "blue"){ chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { var activeTab = tabs[0]; chrome.tabs.sendMessage(activeTab.id, {"me

浏览 1提问于2016-01-11得票数 2

2回答

Chrome扩展-更改styles.CSS var不工作

javascript、css、google-chrome-extension

抱歉，我搞砸了。我没有更新上一篇文章中的清单，我忘记了content.js，这就是更改按钮是如何发送值的，页面是如何从文本字段中输入的新样式属性值中获取新样式属性值的，然后添加到content.js中，在下面添加了现有的content.js文件。我有一个styles.css，它可以更改网页，并从弹出窗口加载，但希望从弹出窗口输入的数据中更改styles.css中的变量。我已经添加了一个content.js文件，现在我可以从弹出窗口传递一个值，它向页面添加了一个新的样式属性，但是它没有在styles.css文件中更新--ptwidth。我认为我需要让它在styles.css中给出正确的位置

浏览 11提问于2022-01-29得票数 1

回答已采纳

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

你能在网页元素中搜索特定的单词吗？Chrome扩展，Javascript

相关·内容

从弹出到不使用sendMessage扩展的content.js

chrome扩展中的消息传递不起作用

Chrome扩展:：尝试理解chrome.runtime.sendmessage到chrome.runtime.onMessage的语法

当弹出式脚本重新打开时，为什么弹出脚本会向内容脚本发送更多的消息？

通过Chrome扩展在内容和PopUp之间传递信息

Chrome扩展addEventListener为空

铬扩展。JS适用于弹出窗口，而不是主窗口。

从弹出窗口向内容脚本发送消息- Chrome扩展

只在单击图标时运行

多次触发Chrome扩展消息

在chrome扩展中，popup和content.js不能通信

消息传递铬扩展

如何将数据从content.js发送到popup.js？

Chrome扩展无法从弹出文件加载我的JavaScript

Chrome扩展错误试图将数组从内容脚本发送到弹出脚本

Chrome扩展中JS/HTML之间的通信

从popup.html到content.js的Chrome扩展sendMessage无法正常工作

chrome扩展-使用django后端登录popup.html

在chrome扩展上使用background.js的目的是什么？

Chrome扩展-更改styles.CSS var不工作

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐